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属性