(vue.html) <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="http://mockjs.com/dist/mock.js"></script> <script type="text/javascript"> //模拟个数据 Mock.mock( 'http://mockjs',{ "status":"200", "message":"ok", "data|10":[{ "id|+1":1, "name|1-10":"*", "age|20-80":20, "email":"@date('yyyy-MM-dd')" }] }); </script> </head> <body> <div id="app"> <button id="btn" v-on:click="print" type="button">click</button> <input type="text" v-model="message" id="txt"/> <div id="dv">{{message}}</div> <table border="1"> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>邮箱</th> </tr> <tr v-for="u in list"> <td>{{u.id}}</td> <td>{{u.name}}</td> <td>{{u.age}}</td> <td>{{u.email}}</td> </tr> </table> </div> </body> <script type="text/javascript"> new Vue({ el:"#app", data:{ message:"我爱蓝桥", list:[{ id:"1", name:'大蓝桥', age:25, email:'250@qq.com' }, { id:"2", name:'蓝桥2', age:252, email:'250123453@qq.com' }] }, created:function () { this.init(); }, // methods:{ // //点击click执行的方法 // print:function () { // alert(this.message); // }, // //ajax调用json值 // init:function () { // var _self=this; // axios.get("=user.json") // .then(function (response) { // if(response.data.status=="200"){ // _self.list=response.data.data; // } // }) // .catch(function (error) { // console.log(error); // }) // } // }, methods:{ //点击click执行的方法 print:function () { alert(this.message); }, //ajax调用 init:function () { var _self=this; axios.get("http://mockjs") .then(function (response) { if(response.data.status=="200"){ _self.list=response.data.data; } }) .catch(function (error) { console.log(error); }) } } }) </script> </html>
(user.json)
{ "status":"200", "message":"ok", "data": [ { "id":"1", "name":"小张三", "age":35, "email":"250@lanqiao.org" } ] }