1.模拟后台的json数据
{ "name": "小吴", "url": "https://www.baidu.com", "page": 1, "address": { "street": "fubuhe", "city": "长沙" }, "links": [ { "name": "百度", "url": "https://baidu.com" }, { "name": "bilibili", "url": "https://www.bilibili.com" } ] }
2.html里的操作,显示数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 解决显示模板的问题--> <style> [v-clock]{ display: none; } </style> </head> <body> <!--view层--> <div id="vue" v-clock> {{info.name}}----{{info.address.city}}---{{info.links[1].name}}} <a v-bind:href="info.url">百度</a> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="text/javascript"> var vm = new Vue({ el: ‘#vue‘, data() {//接受mounted里的数据的方法 return { //请求的返回参数格式必须和json字符串一致 info: { name: null, url: null, address: { street: null, city: null }, links: [{ name: null, url: null } ] } } }, mounted() {//钩子函数 axios.get(‘data.json‘).then(response => (this.info = response.data)); } }); </script> </body> </html>