Vue.js对于类和内联样式做了专门的加强,使得操作元素的类列表和内联样式这样的常见需求变得更为方便

动态切换类

我们希望有些类的效果在固定情况下触发,这样的功能在原生js中一般是通过对classList进行增删来实现的,而VUE则允许通过一个布尔变量来控制类是否生效

1
2
3
<div id="app">
<button type = "button" :class="{active:true}"></button>
</div>

这就表示active这个类是可用的

如果有多个类,则可以用逗号逗开放入对象中

1
2
3
<div id="app">
<button type = "button" :class="{active:true, good:true}"></button>
</div>

因为是布尔变量,因此我们可以在data中设置一个变量来控制类是否使用,同时,我们可以绑定一个方法来改变这个变量

1
2
3
<div id="app">
<button type = "button" :class="{active:isActive, good:true}" @click="toggleActive">click</button>
</div>
1
2
3
4
5
6
7
8
9
10
11
var app= new Vue({
el:"#app",
data:{
isActive:true
},
methods:{
toggleActive:function(){
this.isActive = !this.isActive
}
}
})

我们给按钮设置两个style

1
2
3
4
5
6
.active{
background-color: pink;
}
.good{
color:white;
}

我们可以看到,第二个类一直生效,而第一个类可以跟着点击事件切换其生效状态

数组形式控制类

刚才的例子也可以用数组形式来写,代码如下所示

1
2
3
4
5
<button
type = "button"
:class="['good', isActive1]"
@click="toggleFn"
>click</button>

我们可以直接在数组中放入一个字符串变量,通过改变这个变量的值来控制类

如下所示,我们首先给这个变量设置一个初始值,在点击事件中对该变量进行值的改变即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 var app = new Vue({
el: "#app",
data: {
isActive1: ""
},
methods: {
toggleFn: function () {
if (this.isActive1 == "") {
this.isActive1 = "active"
} else {
this.isActive1 = ""
}
}
}
})

混合形式控制类

除此之外,Vue.js支持更复杂的数组和对象混合的形式来控制类,并且class和绑定的class也可以一起使用,Vue.js会帮你自动拼接,使用例子如下

1
2
3
4
5
6
7
8
9
// 数组和对象混合
<button
:class="['good',{active:isAcitve}]"
>按钮</button>
// class与绑定的class一起使用
<button
class = "abcd bcd"
:class="['good',{active:isAcitve}]"
>按钮</button>

字符串形式控制类

最为原始的方式就是用字符串的形式来控制类

1
<button :class = "str" ></button>

绑定data中的变量str,之后我们对这个字符串进行拼接,删除等操作就可以实现类的控制了,不过就比上述方法复杂多了

内联样式的控制

内联样式的控制和类的控制非常相似

首先同样可以通过对象来控制,css属性支持在引号内使用原属性名或者直接用驼峰命名法

1
2
3
4
5
6
7
8
9
10
11
// html标签中
:style = styleObj
// vue对象中
data:{
styleObj:{
// 驼峰命名法
'background-color':'red',
// 引号法
borderRadius: 2px
}
}

需要特别注意的是,两种不同的属性使用方法对应的是不同的属性修改方法,比如使用了驼峰命名法的属性无法用引号法对应的方法来修改属性,两种属性的对应修改方法见下代码

1
2
3
4
// 引号法属性的修改
styleObj['background-color'] = xxxx
// 驼峰命名法属性的修改
styleObj.borderRadius = xxx

除了对象控制之外,style也支持混合模式和字符串模式,混合模式格式见下

1
:style="[styleObj, sizeObj]"

可以通过这个方式直接拼接两个对象中的css属性