Vuejs入门教程之Vue生命周期,数据,手动挂载,指(3)

初始情况下,这个div的class和data里的BC绑定,由于BC的值是black,那么相当于v-bind所在的标签的class=”black”,所以初始情况下,背景颜色为黑色。

当点击按钮后,BC的值被更改为white,那么相当于标签的class=”white”,而类white的背景颜色为白色,所以该div的背景颜色变成了白色。

类似的有v-on:click事件,表示监视的是click事件,也可以改为

<div v-on:mouseup="alert">背景颜色变化</div> 

表示该标签当鼠标弹起的时候,执行methods的alert函数。

③修饰符

修饰符用于表示指令应当以特殊的方式进行绑定。

例如:.literal修饰符告诉指令应当将他的值解析为字符串,而不是表达式

或者是keydown.enter表示按回车键时调用函数

<input v-on:keydown.enter="alert"></input> 

④缩写:

v-on的缩写是@ shift+数字2

v-bind的缩写是:就是冒号

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wypxsy.html