Vue中的样式绑定

Vue中的样式绑定_第1张图片

实现一个样式,点击完Hello World变色,再点击变回去

一,Class与Style绑定

1,对象语法

Vue中的样式绑定_第2张图片

首先在div上添加一个handleDivClick函数,然后再绑定一个class,并且class的值为activated,但是class是否有值,让其根据isActivated来判断

当isActivated为false时:

Vue中的样式绑定_第3张图片

当其为true时

Vue中的样式绑定_第4张图片

当activated发生改变时,由于是data中的数据发生变化了,所以又会重新渲染页面。

由于这种方式是给v-bind:class传入一个对象,然后动态切换class,所以叫对象语法。

上面的语法表示active这个class存在与否将取决于数据属性isActive的真值

既然是对象,那么我们就可以传入更多的属性来动态切换多个class,此外v-bind:class指令也可以与普通的class属性共存

Vue中的样式绑定_第5张图片

Vue中的样式绑定_第6张图片

点击一下之后

Vue中的样式绑定_第7张图片

2,数组语法

Vue中的样式绑定_第8张图片

class里面存放的是一个数组,我们最开始在data中将activated置为空,在点击时,用下面的三元表达式,如果this.activated等于activated,再次置空,如果不等于activated,就赋值为activated

既然是是一个数组,那么,也就可以添加多个元素,所以有下面的:

Vue中的样式绑定_第9张图片

Vue中的样式绑定_第10张图片

在点击一次之后

Vue中的样式绑定_第11张图片

二,绑定内联样式

刚才是和class进行绑定,现在直接绑定到内联样式上

1,对象语法

Vue中的样式绑定_第12张图片

在元素div的style内联样式上添加一个StyleObj对象,在data中添加对应的对象,然后通过methods里的方法来改变对象的值,从而渲染页面

Vue中的样式绑定_第13张图片

点击一下

Vue中的样式绑定_第14张图片

2,数组语法

Vue中的样式绑定_第15张图片

Vue中的样式绑定_第16张图片

再点击一下

Vue中的样式绑定_第17张图片

数组语法的意思是如果v-bind:style后面是一个数组,那么我这个样式就由数组里面的对象来决定

当然数组里面也可以添加多个对象

Vue中的样式绑定_第18张图片

Vue中的样式绑定_第19张图片

点击一下

Vue中的样式绑定_第20张图片

Vue中的样式绑定_第21张图片

你可能感兴趣的:(Vue)