1、对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存：

<div class="static"

v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

data: {

isA: true,

isB: false

}

渲染为：<div class="static class-a"></div>

 

延伸：

<div :class="index == beforeRank ? 'before-style' : 'not-before' "></div>

 

2、数组语法

<div

v-bind:class="[classA, classB]">

data: {

classA: 'class-a',

classB: 'class-b'

}

渲染为：<div class="class-a class-b"></div>

 

3、直接绑定内联样式

也可以直接绑定一个内联样式，同样的，对象语法常常结合返回对象的计算属性使用。直接绑定到一个样式对象通常更好，让模板更清晰：

<div

v-bind:style="styleObject"></div>

data: {

styleObject: {

color: 'red',

fontSize: '13px'

}

}

 

延伸：

①直接绑定样式值

<span v-bind:style="{borderColor: activeColor}">{

{title}}</span>

②绑定函数，函数的返回值为样式

<div :style="commonStyle(index)"> </div>

 

如果文章对你有帮助，麻烦帮忙点个赞哦！嘿嘿！做一个靠谱的技术博主！