<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Vue的常见指令</title> <script src="js/vue.js"></script> </head> <body> <div id="container"> <!-- 将myList中的元素显示在一个无序列表中 --> <h4>one</h4> <ul> <li>{{myList[0]}}</li> <li>{{myList[1]}}</li> <li>{{myList[2]}}</li> <li>{{myList[3]}}</li> <li>{{myList[4]}}</li> </ul> <h4>v-for循环指令</h4> <ul> <li v-for="tmp in myList">{{tmp}}</li> </ul> <h5>拿到变量对应的index</h5> <h5>对象</h5> <p v-for="(value,key) in cart">{{"key is:"+ key+"value is: "+value}}</p> <h5>数组</h5> <p v-for="(value,key) in myList">{{"key is:"+ key+"value is: "+value}}</p> </div> <script> new Vue({ el:"#container", data:{ myList:[100,200,300,400,500], cart:{ brand:"BMW", price:20 } } }) </script> </body> </html>
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="container"> <h4>恩</h4> <table> <thead> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> </thead> <tbody> <tr v-for="value in person"> <td>{{value.name}}</td> <td>{{value.sex}}</td> <td>{{value.age}}</td> </tr> </tbody> </table> <h4>v-for </h4> <table> <thead> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> </thead> <tbody> <tr v-for="value in person"> <td v-for="tmp in value">{{tmp}}</td> </tr> </tbody> </table> </div> <script> new Vue({ el:"#container", data:{ person:[ {name:"Tom",sex:"男",age:18}, {name:"Rose",sex:"女",age:17}, {name:"Baby",sex:"女",age:18}, {name:"Jack",sex:"男",age:19}, {name:"Marry",sex:"女",age:18} ] } }) </script> </body> </html>
一个标签里面只能有一个相同的指令，相同的运算写在一个指令中，{{}}中多个运算用逗号隔开