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
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值