3-5 Vue中的样式绑定

时间:2023-03-08 17:58:33
3-5 Vue中的样式绑定

Vue中的样式绑定:

本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果

方法一:【class】

(class和对象的绑定)

3-5 Vue中的样式绑定

//如上,运用class和一个对象的形式来解决样式和数据的绑定效果,这种语法叫做class的对象绑定

//效果如下图:

3-5 Vue中的样式绑定

//当点击div,右侧的html代码就会给div添加一个class,并且实现div中的文字变红色的效果。。。

======================================================

②(class和数组的绑定)

3-5 Vue中的样式绑定

//如上,运用class和数组相绑定的用法,当这个数组里面写了一个内容,这个内容是个变量。class上会显示这个变量对应的内容

//显示效果和之前一样

=========================================================

方法二:【style】

(style和对象的绑定)

3-5 Vue中的样式绑定

//这里运用style结合对象的形式来编写。data中接收传进来的styleObj对象,styleObj里面的书写格式和css一样

//显示效果如下图:

3-5 Vue中的样式绑定

//运用这种方法,div中添加了style属性,默认为black。当点击div,style的值就变成了red。因此达到实现效果。。。

======================================================

(style和数组的绑定)

3-5 Vue中的样式绑定

//这个样式由数组里的对象所决定,写法和class一样,只不过改为数组形式就行了。而且因为是数组,所以可以挂载多个对象(如上图第12行代码,但要注意书写格式)
//第12行和第22行显示效果一样的,因为数组可以挂载多个对象
//所以,显示的效果如下:
3-5 Vue中的样式绑定

相关文章