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
Vue中事件绑定
猜你喜欢
转载自blog.csdn.net/qq_38368356/article/details/84107626
今日推荐
周排行