1. 程式人生 > >Vue中事件繫結

Vue中事件繫結

1.滑鼠劃過操作hover
2.新增一個滑鼠點選事件v-on:click="aaa(0)" 可以寫成@click="aaa(0)"     
<div>{{activeindex}}</div>
activeIndex=null	  設定初始值為空

3.給aaa新增一個方法
	method:{
		aaa(index)={this.activeindex=index}; 
		滑鼠一點選 讓div裡的值等於aaa()裡index的值
		
4.class樣式繫結:<div  :class="{item ,active  }"></div>
		data(){ 
		   return{
			item:true,
			active:true
			}	
			  }
		item設定div裡的樣式,active設定點選後的顏色

5.v-text與v-html
	<span> 

   ​	{{message}}     =<span v-text="message"></span>

​	</span>

data:{ message:'Hello' }

<span v-html="msg"></span>

​	data:(msg:'<h2>Hello World</h2>')

6.v-on 繫結事件監聽:編寫一個加分減分的程式
	<div>
		本場比賽得分{{count}}
		<button v-on:click="jiafen">加分</botton>
		<button v-on:click="jianfen">減分</botton>
	</div>
	
	data:(
			count:1;
			)
	methods:{
        jiafen:function(){
            this.count++;
        }  
	}
	<button @click="jianfen">減分</button>
	v-on:click簡寫@click
	   
	v-on除了繫結click,還可以繫結鍵盤迴車事件v-on:keyup.enter