基于 Laravel 的 Vue.js 中文学习教程 —— Class 与 Style 绑定

数据绑定一个常见的需求就是操作元素的class列表和内联样式,由于它们都是属性,所以我们可以使用v-bind来处理:我们只需要使用表达式来计算最终的字符串。不过,字符串拼接既麻烦又容易出错,因为这个原因,在v-bind用于class和style的时候,Vue.js对此专门进行了增强,除了字符串以外,这些表达式还可以计算为对象数组

绑定HTML Class

尽管你可以使用Mustache标签绑定到class,例如class="{{ className }}",不过并不推荐将这种风格和v-bind:class混在一起。两者只能任选其一。

对象语法

我们传递一个对象到v-bind:class来动态切换class,注意v-bind:class指令可以和原生的class属性共存:

HTML代码:

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

JS代码:

data: {
    isA: true,
    isB: false
}

渲染结果如下:

<div class="static class-a"></div>

isAisB改变的时候,class列表也会相应更新,例如,如果isB变成true,class列表会变成"static class-a class-b"

你可以可以直接绑定data数据中的对象:

HTML代码:

<div v-bind:class="classObject"></div>

JS代码:

data: {
    classObject: {
        'class-a': true,
        'class-b': false
    }
}

这种方式和上面的结果一样,你可能已经注意到,还可以绑定到一个计算属性返回的对象,这是一个通用且功能强大的模式。

数组语法

我们可以传递数组到v-bind:class来应用class列表:

HTML代码:

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

JS代码:

data: {
    classA: 'class-a',
    classB: 'class-b'
}

渲染结果如下:

<div class="class-a class-b"></div>

如果你还想按条件切换class,可以通过一个三元运算表达式来实现:

<div v-bind:class="[classA, isB ? classB : '']">

这样,classA会一直出现,而classB则只有在isBtrue的时候才显示。

不过,如果你有多个条件类时,上述写法显得有些累赘,在Vue 1.0.19+版本中,还可以在数组语法中使用对象语法:

<div v-bind:class="[classA, { classB: isB, classC: isC }]">

绑定内联样式

对象语法

用于v-bind:style的对象语法非常直截了当 —— 和CSS看上去基本一样,除了这是一个JavaScript对象之外。CSS属性名可以使用驼峰式命名也可以是短横线分隔:

HTML代码:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

JS代码:

data: {
    activeColor: 'red',
    fontSize: 30
}

通常,绑定样式对象是一个更好的主意,因为这样代码会更清晰:

HTML代码:

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

JS代码:

data: {
    styleObject: {
        color: 'red',
        fontSize: '13px'
    }
}

对象语法通常和计算属性一起结合使用返回对象。

数组语法

v-bind:style的数组语法允许你应用多个样式对象到同一个元素:

<div v-bind:style="[styleObjectA, styleObjectB]">

自动添加前缀

当你在v-bind:style中使用一个需要厂商(vendor)前缀的CSS属性时,例如transform,Vue.js会自动侦测并为其添加相应的前缀。

学院君

学院君 has written 548 articles

资深PHP工程师,Laravel学院院长