标签:reverse dem push str input vue this click eve
1、v-for 对于数据的重复渲染,可以使用(itm,index)取表示相对的数组的值和索引。
<body id="example"> <ul id="repeat-object"> <li v-for = "item in items">{{item.msg}}</li> <li> =========</li> <li v-for="(item,index) in items"> {{item}}:{{index}}</li> </ul> </body> <script> var demo = new Vue({ el:"#repeat-object", data:{ items:[ {msg:"1"}, {msg:"2"} ] } }); </script>
对于for循环中,数组的更新操作。push、pop、shift、unshift、splice、sort、reverse都支持视图的更新。
2、 v-on 指令:添加事件的处理机制。v-on:click 的简写为 @click
<body id="example"> <ul id="repeat-object"> <li v-for = "item in items">{{item.msg}}</li> <li> =========</li> <li v-for="(item,index) in items"> {{item}}:{{index}}</li> <li><input type="button" value="添加对象" v-on:click="AddItem" ></input></li> </ul> </body> <script> var demo = new Vue({ el:"#repeat-object", data:{ items:[ {msg:"1"}, {msg:"2"} ] }, methods:{ AddItem:function(){ var i = this.items.length +1; var o = {}; o.msg = i.toString(); this.items.push(o); } } }); </script>
注意:目前从今天开始看vuejs版本是2.0.7
标签:reverse dem push str input vue this click eve
原文地址:http://www.cnblogs.com/shannonliang/p/6091708.html