|
示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue测试</title> <script src="https://cdn./vue/2.5.16/vue.min.js"></script> </head> <body> <div id="app"> <input type="text" name="username" v-model="username"> {{url}} <a v-bind:href="url">点击跳转1</a> <a :href="url">点击跳转2</a> <input type="button" value="点击" @click="show1()"> <div v-if="status==1">状态1</div> <div v-if="status==2">状态2</div> <input type="text" name="status" v-model="status"> <div v-show="status==1">test</div> <div v-for="domain in arrays"> <li>{{domain}}</li> </div> </div> <script> new Vue({ el:"#app", data(){ return { username: 'mytest', url:'http://localhost:8080/test', status: 1, arrays:['t1','t2','t3'] } }, methods:{ show1(){ alert("cest") }, show2(){ } } }); </script> </body> </html> 示例2 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vueindex</title> <script src="https://cdn./vue/2.5.16/vue.min.js"></script> <!--发送ajax引用--> <script src="https:///axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <table> <thead> <colgroup> <col width="100"> <col width="200"> <col width="100"> <col width="200"> </colgroup> </thead> <tr> <th>ID</th> <th>名称</th> <th>年龄</th> <th>操作</th> </tr> <tr v-for="user in users"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> <td><a>删除</a>></td> </tr> </table> </div> <script> new Vue({ el: '#app', data() { return { users: [] } }, //页面加载完毕执行 mounted() { var ths = this; axios({ method: 'GET', url: 'http://localhost:8081/mytest//user/findAll' }).then(function (result) { var code = result.status; var data = result.data; if (code == "200") { ths.users = data; } }); }, }); </script> </body> </html> |
|
|
