Vueaxios异步通信
Posted 测试学习笔记
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vueaxios异步通信相关的知识，希望对你有一定的参考价值。
data.json
{
"name": "java",
"url": "http://www.baidu.com",
"page": 1,
"isNonProfit": true,
"address": {
"street": "凯宾路",
"city": "上海",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https:www.bilibili.com"
},
{
"name": "java",
"url": "https:www.java.com"
},
{
"name": "百度",
"url": "https:www.baidu.com"
}
]
}
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*解决闪烁问题*/ [v-clock]{ display: none; } </style> </head> <body> <div id="app" v-clock> <div>{{info.name}}</div> <a v-bind:href="info.url">超链接</a> <div>{{info.page}}</div> <div>{{info.isNonProfit}}</div> <hr> <div>{{info.address.street}}</div> <div>{{info.address.city}}</div> <div>{{info.address.country}}</div> <hr> <div v-for="link in info.links">{{link.name}}</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="text/javascript"> var vm = new Vue({ el: "#app", data(){ return{ info:{ name:null, url:null, page:null, isNonProfit:null, address:{ street:null, city:null, country:null }, links:[ { name:null, url:null } ] } } }, mounted(){//钩子函数 axios.get(‘../data.json‘).then(response=>(this.info=response.data)); } }); </script> </body> </html>
以上是关于Vueaxios异步通信的主要内容，如果未能解决你的问题，请参考以下文章