Vue學習(事件處理)

監聽事件
使用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的簡寫。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章