广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

v-bind怎么动态绑定class属性？本篇文章带大家详细了解一下v-bind指令动态绑定class属性的多种语法，希望对大家有所帮助！

v-bind可以动态设置class属性，用以实现动态样式。写法：

<!--完整写法--><标签名 v-bind:class="vue实例中的数据属性名"/><!--简化写法--><标签名 :class="vue实例中的数据属性名"/>

一、v-bind动态绑定class属性（对象语法）

动态绑定class属性之后，class的值是一个变量，可以将它放到data中动态绑定样式，以动态地切换 class。（学习视频分享：vue视频教程）

1、直接通过{}绑定一个或多个类

v-blid:class的属性中可以传入一个对象，对象中包括一组组键值对

:class= "{key1：value1，key2：value2...}"

类名就是对应的样式，也就是键（key）；value就是对应着增加和移除该类，取值是true和false

若value值为true，则该key样式起作用

若value值为false，则该key样式不起作用

<!-- 样式 --><style>.color {color: red;}.background {background-color: pink;}</style>

<div id="app">  <h2 class="color">{{message}}</h2>  <!-- 第一种：直接用style中的样式，固定写死； -->    <h2 v-bind:class="color">{{message}}</h2>  <!-- 第二种：用指令v-bind,class的属性值color为变量； -->  <!-- vue解析，变量对应data中color属性值，则用了color的样式； -->    <h2 v-bind:class="{color:isColor, background:isBackground}">{{message}}</h2>  <!-- 第三种：用指令v-bind；后面接对象{key1：value1，key2：value2} -->  <!-- isColor为false则color样式不起作用。 -->  <!-- isBackground为true则background样式起作用。 --></div><script>  const app = new Vue({    el:"#app",    data:{      message:"你好啊",      color:"color",      isColor:false,      isBackground:true    }  })</script>

v-bind:class 指令也可以与普通的 class 属性共存。

<div  class="static"  v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {  isActive: true,  hasError: true}

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 false，class 列表将变为 "static active"。

data: {  isActive: true,  hasError: false}

2、绑定的数据对象不必内联定义在模板里，可绑定到一个类对象classObject

<!-- 样式 --><style>.color {color: red;}.background {background-color: pink;}</style>

<div id="app">  <h2 v-bind:class="classObject">{{message}}</h2>  <!-- 如下：绑定到一个类对象classObject，对象中设置多个key:value对 -->  <!-- color为true则color样式起作用。 -->  <!-- background为false则background样式不起作用。 --></div><script>  const app = new Vue({    el:"#app",    data:{message:"你好啊",classObject: {color: true,background: false}    }  })</script>

3、也可以绑定一个返回对象的计算属性

<div id="app">  <h2 v-bind:class="classObject">{{message}}</h2>  <!-- 如下：绑定到一个类对象classObject，对象中设置多个key:value对 -->  <!-- color为true则color样式起作用。 -->  <!-- background为false则background样式不起作用。 --></div><script>  const app = new Vue({    el:"#app",    data:{message:"你好啊",isColor: true,isBackground: true},computed: {  classObject: function () {return {  color: this.isColor,  background: this.isBackground}  }}  })</script>

4、class中的对象比较复杂，则直接放在一个methods中，然后调用这个函数，实现动态切换

:class= "{key1：value1，key2：value2...}"0

二、v-bind动态绑定class属性（数组语法）

我们可以把一个数组传给 :class，以应用一个 class 列表；

数组语法格式为：

:class= "{key1：value1，key2：value2...}"1

v-bind 动态绑定class 数组语法，就是直接给其传入一个数组，但是数组里面都是类名，数组中的类名，在页面中都会被加入到该标签上。通过数组内元素的增加或减少来实现，样式的改变。

注意：这里面的类名都需要用 ' ' 包裹起来，如果没有包裹起来，Vue会将其当成data里面的某个属性，而去data里面寻找，显然data里面是没有该属性的，那么报错也就来了。这一点在Vue中都是通用的，没加引号当成data里面的属性来处理

注：和对象语法一样，可以和普通的类同时存在，并不冲突

:class= "{key1：value1，key2：value2...}"2

示例：

:class= "{key1：value1，key2：value2...}"3

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

:class= "{key1：value1，key2：value2...}"4

这样写将始终添加 errorClass，但是只有在 isActive 是 true 时才添加 activeClass。

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

:class= "{key1：value1，key2：value2...}"5

示例：

:class= "{key1：value1，key2：value2...}"6

（学习视频分享：web前端开发、编程基础视频）

以上就是详解v-bind怎么动态绑定class属性的详细内容，更多请关注9543建站博客其它相关文章！