class绑定

切换绑定的class在Vue中使用对象形式来绑定，这样减少了字符串的拼接过程。

例如，现在要实现一个如下场景，页面中有一个列表，当其中一行被点击选中时，就从绿色变为橘色，基础代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {background: rgb(189, 216, 189); padding:10px; margin-bottom:10px;}
        li.active {background: orange;}
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li class="active">111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
</body>
</html>

第9、10两行为li样式，被选中的行为橘色，未被选中的行为绿色

基础样式:

class绑定基础语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于布尔类型变量isActive的值。

现在改成使用vue的class绑定,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {background: rgb(197, 221, 197); padding:10px; margin-bottom:10px;}
        li.active {background: orange;}
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li :class="{active:isActive}">111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            isActive:true
        }
    })
</script>

第17行使用v-bind和对象绑定变量，大括号中冒号前为类名，冒号后为绑定的变量名
第28行新命令一个布尔值类型变量

多class绑定

并且class绑定不会被覆盖，也就是说可以一个标签可以多个class同时绑定，代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {background: rgb(189, 216, 189); padding:10px; margin-bottom:10px;}
        li.box {font-size:20px;}
        li.active {background: orange;}
        li.myOn {font-style:italic}
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li class="box" :class="{active:isActive,myOn:on}">111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            isActive:true,
            on:true
        }
    })
</script>

9-12行样式
- 第10行字体变大
- 第11行背景为橘色
- 第12行字体倾斜
第19行同时绑定了box、active、myOn类属性

观察页面:

可以看到多个class时绑定样式都是生效的。

使用对象多个绑定

上面的方法可以发现需要将多个class名绑定在同一个标签上，这样的写法比较繁琐，因此可以直接在data中先声明一个对象Object，在Object中将这些类型写在一起。

例如以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {background: rgb(189, 216, 189); padding:10px; margin-bottom:10px;}
        li.box {font-size:20px;}
        li.active {background: orange;}
        li.myOn {font-style:italic}
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li class="box" :class="{active:isActive,myOn:on}">111</li>
            <li :class="classObj">222</li>
            <li>333</li>
        </ul>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            isActive:true,
            on:true,
            classObj:{
                active:true,
                myOn:true,
            }
        }
    })
</script>

32-34行声明了一个对象，并且将类名和对应绑定的布尔值填写在内
第20行使用v-bind来直接绑定对象名

使用数组多个绑定

这个用的不是很多，了解就好。
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div v-bind:class="[activeClass, errorClass]"></div>
<script>
  new Vue({
    data: {
      activeClass: 'active',  
      errorClass: 'text-danger'
    }
  })
</script>

绑定内联样式

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
例如以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {background: rgb(189, 216, 189); padding:10px; margin-bottom:10px;}
        li.box {font-size:20px;}
        li.active {background: orange;}
        li.myOn {font-style:italic}
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li class="box" :class="{active:isActive,myOn:on}">111</li>
            <li :class="classObj">222</li>
            <li :style="{color:myColor}">333</li>
        </ul>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            isActive:true,
            on:true,
            classObj:{
                active:true,
                myOn:true,
            },
            myColor:"blue"
        }
    })
</script>

第21行使用v-bind绑定了style属性，然后使用对象写法来编写样式，myColor为data中定义的变量
第36行为定义的样式变量，注意样式值为字符串，所以要加引号。
补充：为什么有些类名需要加单引号
```
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
```
在上方官方提供的代码中可以看到text-danger被添加了引号，原因是类名中含有"-"，所以不加引号不会生效

[VUE2]十一、绑定class以及style样式