Vue — class和style绑定

最后更新于:2022-04-02 08:06:32

>[success] # Vue 样式的使用 ~~~ 1.class 样式的使用 2.style 内联样式的使用 ~~~ >[danger] ##### class ~~~ 1.传统使用规定好class名字即可

传统使用

2.直接传递一个数组,下面数组中的值都是样式表中声明的class类名,注意: 这 里的 class 需要使用 v-bind 做数据绑定 :

直接传数组

3.在数组中使用三元表达式:

在数组中使用三元表达式

4.在数组中使用 对象来代替三元表达式,提高代码的可读性 :

在vue实例data中定义flag

5.放入vue实例data中声明

放入vue实例data中声明

data: { flag: true, classObj: { red: true, thin: true, italic: false, active: false } }, ~~~ >[danger] ##### syle ~~~ 1.使用vue实例data中

vue--data中

data: { styleObj1: { color: 'red', 'font-weight': 200 }, styleObj2: { 'font-style': 'italic' } }, 2.使用对象但是当font-size 要写成fontSize:
~~~
';