ref改变样式 vue_3.通过属性修改样式

[1\. 通过属性绑定设置元素class]()

1. 直接传递一个数组class 注意：这里的class需要使用 v-bind 做数据绑定

~~~

VUE教程

~~~

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

~~~

VUE教程

~~~

或

~~~

VUE教程

~~~

3. 在数组中使用对象来代替三元表达式，提高代码可读性

~~~

VUE教程

~~~

4. 在为class使用 v-bind 绑定对象时，对象是的属性是类名，由于对象的属性可带或不带引号，所以没写；属性值 是一个标识符

写法1：

~~~

Vue教程

~~~

写法2：

~~~

Vue教程

~~~

~~~

var vm = new Vue({

el: '#app',

data: {

flag: true,

classObj: { red: true, under: true }

}

})

~~~

[2\. 通过属性绑定设置元素style]()

1. 直接在元素上通过`:style`的形式，书写样式对象

~~~

Vue教程

~~~

2. 将样式对象定义到`data`中，并直接引用到`:style`中

~~~

Vue教程

var vm = new Vue({

el: '#app',

data: {

styleObj: {color:'red', 'text-decoration': 'underline'}

}

})

~~~

3. 在`:style`中通过数组，引用多个`data`上的样式对象

~~~

Vue教程

~~~