axios异步通信
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--解决解析时出现闪烁的问题-->
<style>
[v-block] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-block>
<div>{{info.name}}</div>
<div>
<p>家庭成员:</p>
<ul>
<li>{{info.family.father}}</li>
<li>{{info.family.mother}}</li>
<li>{{info.family.sister}}</li>
</ul>
</div>
<div>
<p>友情链接:</p>
<li v-for="(item,name) in info.links" :key='name'>
<a v-bind:href="item.url">
{{item.name}}
</a>
</li>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
//这里的data是一个方法,之前的data为Vue中的属性
data() {
return {
info: {
name: null,
//对象
family: {
father: null,
mother: null,
sister: null
},
// 数组
links: [
{name: null, url: null},
{name: null, url: null},
{name: null, url: null}
],
}
}
},
//钩子函数
mounted() {
axios.get('../data.json').then(Response => (this.info = Response.data));
}
})
;
</script>
</body>
