前言

样式绑定在vue中属于一种很常见的操作。在之前博客中针对样式的绑定操作，介绍了一个指令v-bind。缩写为:xxx。

vue 官网 样式绑定

往期回顾

先简单回顾下最开始绑定标签样式的操作，当时是采取指定标签的class属性作为样式的修改。

<template><h1>标签动态属性</h1><!-- <div v-bind:class="dynamicClass"></div><br/><div :class="dynamicClass"></div><br/><div :class="!isShow?'green':'red'"></div><br/> --><div v-bind="dynamicMoreBind"></div>
</template><script >
export default{data(){return{dynamicClass:"appClass",isShow:true,// 同标签 多属性值绑定 可以采取封装对象的形式实现dynamicMoreBind:{id:"moreId",class:"appClass"}}}
}
</script>
<style>
.appClass{color:aqua;border: solid 1px;height: 10%;width: 20%;
}
.green{color: green;border: solid 1px;height: 10%;width: 20%;
}
.red{color: red;border: solid 1px;height: 10%;width: 20%;
}
</style>

但使用拼接字符串的方式进行复杂样式的绑定，是很容易出现问题的。因此，vue为class的v-bind指令做了功能增强，除了使用字符串之外，表达式的值也可以是对象或数组。

绑定对象

v-bind指令，动态绑定元素属性的时候，可以采取如下的方式进行对象信息的绑定。

<template><h1>绑定样式class</h1><hr><h2>绑定对象</h2><div :class="{active:isActive,'text-danger':hasError}">6666666</div>
</template>
<script>
export default{data(){return{isActive:true, // 如果为true 则使用 .active ，否则不使用hasError:true}}
}
</script>
<style>.text-danger{color: red;}.active{font-size: 50px}
</style>

其中，:class="{active:isActive,'text-danger':hasError}"中，对象的各个属性值的含义如下：

• 当变量 isActive 为 true 时，则会使用 active 样式
• 当变量 hasError 为 true 时，则会使用 text-danger 样式

效果如下所示：

若其中某个样式的值为false，显示效果如下：

绑定对象的另一种写法

上述的绑定操作中，如果出现很多的对象属性时，采取该方式依旧不能很好的阅读代码和维护。可以将对象定义在tata区中。如下所示：

<template><h1>绑定样式class</h1><hr><h2>绑定对象</h2><!-- <div :class="{active:isActive,'text-danger':hasError}">6666666</div> --><div :class="objClass">7777777</div>
</template>
<script>
export default{data(){return{isActive:false, // 如果为true 则使用 .active ，否则不使用hasError:true,objClass:{'active':true, // 如果为true 则使用 .active ，否则不使用'text-danger':true}}}
}
</script>
<style>.text-danger{color: red;}.active{font-size: 50px}
</style>

绑定数组

数组样式数据，绑定class。如果以其他的语言比如Java来看这个问题，其实数组也是对象的一种形式。前端代码如下所示：

<template><h1>绑定样式class</h1><hr><h2>绑定对象</h2><!-- <div :class="{active:isActive,'text-danger':hasError}">6666666</div> --><div :class="objClass">7777777</div><h2>绑定数组</h2><div :class="['active','text-danger']">数组样式数据绑定1</div><div :class="arryActClass">数组样式数据绑定2</div>
</template>
<script>
export default{data(){return{isActive:false, // 如果为true 则使用 .active ，否则不使用hasError:true,objClass:{'active':true, // 如果为true 则使用 .active ，否则不使用'text-danger':true},arryActClass:['active','text-danger']}}
}
</script>
<style>.text-danger{color: red;}.active{font-size: 50px}
</style>

展示效果如下：

:class绑定数组类型数据的写法，这两种效果是一样的。

在数组对象的写法中，还支持三目表达式的语法，如下所示：

<template><h1>绑定样式class</h1><hr><h2>绑定对象</h2><!-- <div :class="{active:isActive,'text-danger':hasError}">6666666</div> --><div :class="objClass">7777777</div><h2>绑定数组</h2><div :class="['active','text-danger']">数组样式数据绑定1</div><div :class="arryActClass">数组样式数据绑定2</div><div :class="[isActive?'active text-danger':'green']">数组样式数据绑定3</div>
</template>
<script>
export default{data(){return{isActive:false, // 如果为true 则使用 .active ，否则不使用hasError:true,objClass:{'active':true, // 如果为true 则使用 .active ，否则不使用'text-danger':true},arryActClass:['active','text-danger']}}
}
</script>
<style>.text-danger{color: red;}.active{font-size: 50px}.green{color: green;}
</style>

数组与对象的嵌套

数组与对象嵌套的方式，也能进行标签样式的绑定。但这里需要注意一个细节。

只能是数组嵌套对象。

主要写法如下所示：

:class="['active',{green:isGreen}]"

案例如下所示：

<template><h1>绑定样式class</h1><hr><h2>绑定对象</h2><!-- <div :class="{active:isActive,'text-danger':hasError}">6666666</div> --><div :class="objClass">7777777</div><h2>绑定数组</h2><div :class="['active','text-danger']">数组样式数据绑定1</div><div :class="arryActClass">数组样式数据绑定2</div><div :class="[isActive?'active text-danger':'green']">数组样式数据绑定3</div><h2>数组嵌套对象</h2><!-- isGreen 变量值为true时，使用 green 样式 --><div :class="['active',{green:isGreen}]">数组嵌套对象</div>
</template>
<script>
export default{data(){return{isActive:false, // 如果为true 则使用 .active ，否则不使用hasError:true,objClass:{'active':true, // 如果为true 则使用 .active ，否则不使用'text-danger':true},arryActClass:['active','text-danger'],isGreen:true}}
}
</script>
<style>.text-danger{color: red;}.active{font-size: 50px}.green{color: green;}
</style>