写在前：这是 .html 的dome文件 引入本地数据 json文件

1.实例

<div id="app">
	<div class="student" style="width: 80%;margin: 0 auto;">
		<ul style="list-style: none; text-decoration: none;">
			<li v-for="person in persons" style="width: 100%; height: 30px; background: pink;border-bottom: 1px solid #ccc;">
				<a href="">
					<div style="float: left;">
						{{person.name}}
					</div>
					<div style="float: right;">
						{{person.message}}
					</div>
				</a>
			</li>
		</ul>
	</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
	var vm = new Vue({                
		el: "#app", //实例
		  data: { //数据M
			persons: [],
		},
		created: function() { //挂载
			var self = this;                    
			self.initdata()                
		},
		methods: { //定义函数
			initdata: function() {                        
				var url = "one.json"; //定义引入地址
				_this = this; //改变this指向
				axios.get(url).then(function(result) { //获取数据
					console.log(result.data);                            
					_this.persons = result.data.persons;                        
				})                    
			}                
		}            
	})
</script>

2.本地json数据

需要新建一个.json文件 引入到js 中 

{
	"persons": [
		{
			"name": "li",
			"message": "知道了",
			"time": "01:00",
			"url": "images/student/girl.png"
		}, {
			"name": "ja",
			"message": "在吗",
			"time": "02:00",
			"url": "images/student/girl.png"
		}, {
			"name": "he",
			"message": "真的",
			"time": "03:00",
			"url": "images/student/girl.png"
		}, {
			"name": "lu",
			"message": "好的",
			"time": "04:00",
			"url": "images/student/girl.png"
		}, {
			"name": "xiao",
			"message": "加载",
			"time": "05:00",
			"url": "images/student/girl.png"
		}
	]
}
//放在 one.json 文件中

3.分析

//添加vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

//使用axios 获取数据
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>