vue之v-bind动态绑定属性

1.v-bind的基本使用

在这里插入图片描述
v-bind就是用来动态的绑定我们的属性,一般来说绑定的值都是在我们的vue里面进行查找。当vue里面的值进行改变,我们绑定的属性的值也会进行改变。他的缩写时:,单纯的一个冒号。

2绑定class

在这里插入图片描述
v-bind配合v-on同时使用,当我们的点击按钮的时候,v-bind绑定的值就会进行取反,这时候我们的属性就会发生变化,就相当于为我们的标题添加了一个class属性。结果如下:
在这里插入图片描述在这里插入图片描述
还有就是我们的v-bind也可以用数组语法动态绑定我们的class属性。
在这里插入图片描述
最后得到我们的结果的话就是这样子的,还有就是如果给我们的active加了单引号,那么我们的结果就是active了,就不是变量了。如果想要得到变量的话,是不能加单引号的。
在这里插入图片描述
相当于给我们绑定了多个class

3.动态绑定style对象

在这里插入图片描述
v-bind绑定style的话就是:style="{key(属性名): value(属性值)}",然后我们再在data中设置我们需要设置的参数,就可以了。和绑定class其实差不多。
在这里插入图片描述
这个第二种的话就使用数组的方式来绑定我们的style,具体方式如上图。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章