Vue——Class和Style绑定

矫情吗；* 2021-09-14 12:28 479阅读 0赞

# Class 与 Style 绑定 #

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 `v-bind` 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 `v-bind` 用于 `class` 和 `style` 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

### 绑定HTML class ###

\#对象语法

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

上面的语法表示 active 这个class是否起作用决定于后面紧跟的数据属性 isActive 的真值，当值为true的时候存在，反之不存在。例子如下：

案例1

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>绑定HTML Class测试</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <style>
    .active {
    	background: green;
    }
    </style>
    </head>
    <body>
    <div id="app">
      <div v-bind:class="{ active: isActive }">我现在有颜色了</div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        isActive: true
      }
    })
    </script>
    </body>
    </html>

![20171221100626448][]  
当然，也可以在对象中传入更多属性来动态切换多个class。此外，v-bind：class 指令也可以和普通的class 属性共存，有以下模板：

整个案例如下：

案例2

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 绑定 HTML Class</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <style>
    .active {
    	background: green;
    }
    .text-danger {
    	background: red;
    }
    .static{
    	color:red;
    	}	
    </style>
    </head>
    <body>
    <div id="app">
      <div class="static"
         v-bind:class="{ active: isActive, 'text-danger': hasError }">
    	  you can try it
      </div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        isActive: true,
    	hasError: false
      }
    })
    </script>
    </body>
    </html>

![20171221102624973][]  
其结果渲染为：

如果 hasError 的值为true，class 列表将变为" static active text-danger"  
我们也可以直接绑定数据里的一个对象：  
案例3

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 绑定 HTML Class</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <style>
    .active {
    	background: green;
    }
    .text-danger {
    	color: red;
    }
    </style>
    </head>
    <body>
    <div id="app">
      <div v-bind:class="classObject">you can try it</div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        classObject: {
          active: true,
          'text-danger': true
        }
      }
    })
    </script>
    </body>
    </html>

![20171221103509383][]

渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性 。这是一个常用且强大的模式：

案例4

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 -  绑定 HTML Class</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <style>
    .active {
    	background: green;
    }
    .text-danger {
    	background: red;
    }
    </style>
    </head>
    <body>
    <div id="app">
      <div v-bind:class="classObject"> you can try it</div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
      isActive: true,
      error: true
      },
      computed: {
        classObject: function () {
    		console.log(typeof this.error)
          return {
            'active': this.isActive && this.error,
            'text-danger': this.error && this.error.type === 'fatal',
          }
        }
      }
    })
    </script>
    </body>
    </html>

![20171221104655765][]

\#数组语法

我们可以把一个数组传给  v-bind:class ，以应用一个 class 列表：

案例5

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 绑定 HTML Class</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <style>
    .active {
    	background: green;
    }
    .text-danger {
    	color: red;
    }
    </style>
    </head>
    <body>
    <div id="app">
    	<div v-bind:class="[activeClass, textClass]">you can try it</div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        activeClass: 'active',
        textClass: 'text-danger'
      }
    })
    </script>
    </body>
    </html>

![20171221105740910][]  
注意：定义几个class属性就要赋值几个，不然会报错！

如果你也想根据条件切换列表中的 class，可以用三元表达式：

当只有 isActive 为真值时候，activeClass才起作用。

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

###    绑定内联样式 ###

\#对象语法

`v-bind:style` 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

案例6

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 绑定内联样式</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
    	<div v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }">Hello world</div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        textColor: 'green',
    	fontSize: 30
      }
    })
    </script>
    </body>
    </html>

![20171221110756789][]

直接绑定到一个样式对象通常更好，这会让模板更清晰：

案例7

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 绑定内联样式</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <div v-bind:style="styleObject">Hello world</div>
    </div>
     
    <script>
    new Vue({
      el: '#app',
      data: {
        styleObject: {
          color: 'green',
          fontSize: '30px'
        }
      }
    })
    </script>
    </body>
    </html>

![20171221111747358][]  
\#数组语法

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

案例8

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 绑定内联样式</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <div v-bind:style="[baseStyles, overridingStyles]">Hello world</div>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        baseStyles: {
          color: 'green',
          fontSize: '30px'
        },
    	overridingStyles: {
          'font-weight': 'bold'
        }
      }
    })
    </script>
    </body>
    </html>

![20171221112039574][]

[20171221100626448]: /images/20210813/01b75f0e80c3446d9e0e814d7d2fe7e9.png
[20171221102624973]: /images/20210813/72640dec82264d06a0e2dc631f7cc2ad.png
[20171221103509383]: /images/20210813/04fe4f779aee4377b2452050c75490f6.png
[20171221104655765]: /images/20210813/1fd1bf53700e4221ab9b6d3498621ace.png
[20171221105740910]: /images/20210813/cacbeb1549a547d19a28cf39e19e072e.png
[20171221110756789]: /images/20210813/d9593d8e6b0b472eaf2715039ba3b517.png
[20171221111747358]: /images/20210813/6fdca5d1239e4e32ba3de7383a66c07a.png
[20171221112039574]: /images/20210813/f5193c71757d42d8a589a50a62ca8775.png