監聽事件
使用v-on指令可以監聽DOM事件,並在觸發時運行一旦JS代碼。
例:對按鈕進行監聽,當點擊按鈕時觸發次數加一的方法。
點擊數:{{count}}<br />
<!--vue的指令v-on:click 調用事件-->
<button v-on:click="click">點擊</button>
被調用的方法
var vm = new Vue({
el:"#app",
data:{
count:0, // 點擊數
},
methods:{
click:function(){
this.count ++;
},
}
});
可以使用方法遍歷數組中的信息
<ul>
<li v-for="(item,index) in items">
{{index+1}} - {{item.title}}
<!--事件傳參-->
<button @click="del(index)">刪除</button>
</li>
</ul>
var vm = new Vue({
el:"#app",
data:{
items:[],
},
methods:{
query:function(){
// 條件查詢所有
this.items=[
{title:"蘋果"},
{title:"橘子"},
{title:"芒果"}
]
},
}
});
上述功能中添加了刪除按鈕但未實現功能在此基礎上實現刪除功能
編寫刪除方法
methods:{
del:function(obj){
alert(obj);
/*刪除*/
//this.items.splice(obj,1);
},
}
@click是v-on:click的簡寫。