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
时间： 2024-09-30 19:04:35