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

猜你喜欢

转载自blog.csdn.net/qq_38368356/article/details/84107626