vue style 三元_让 Class 与 Style 动起来

Vue 太牛逼了，方便了开发者，却苦了自己，给我们提供了这么方便的操作！

素燕感悟

HTML 中的 class 和 style 支撑整个页面的样式和布局，在未使用 Vue 时，使用 JavaScript 操作 DOM 来修改页面的样式和布局，那么在 Vue 中如果通过数据来修改 class 和 style 呢？

1、选择器与 data 中的数据相互绑定

div 标签始终包含一个 title 选择器，而选择器 blue、samll 是通过数据 isBlue 和 isSmall 来控制的，当这两个属性为真时，blue 和 samll 选择器会被添加到 div 标签上。

class="title" :class="{blue: isBlue, small: isSmall}">{{title}}</div>

.blue {    color: blue;}.small {    font-size: 10px;}

const obj = {    el: '#app',    data: function () {        return {            title: '前端小课',            isBlue: true,            isSmall: false,        }    }}const vm = new Vue(obj);

最终渲染结果为：

class="title blue">前端小课</div>2、直接使用 data 中的数据

可以直接使用 data 中定义对象来动态修改 class，比如例子中的 titleClass。

class="title" :class="titleClass">{{title}}</div>

.blue {    color: blue;}.small {    font-size: 10px;}

const obj = {    el: '#app',    data: function () {        return {            title: '前端小课',            titleClass: {                // blue 与 small 是选择器名                blue: false,                small: true            },        }    }}const vm = new Vue(obj);

最终渲染结果：

class="title small">前端小课

3、使用计算属性这个比较有用，模板中不适合放太多的逻辑，可以把复杂的表达式放到计算属性中。例子中使用了计算属性 subTitleClass，这个用来做主题切换特别方便。

class="title" :class="subTitleClass">{{title}}</div>

.blue { color: blue;}.small { font-size: 10px;}

const obj = { el: '#app', data: function () { return {            title: '前端小课',            isBlue: true, isSmall: false, }    }, computed: { subTitleClass: function () { return { // blue 和 small 是选择器名称 blue: this.isBlue, small: this.isSmall }        } },    }const vm = new Vue(obj);

最终渲染结果：

class="title blue">前端小课

4、三元表达式与多个 class

也可以通过三元表达式来动态切换 class，这里需要注意，如果 ‘bg’ 表示的是选择器 bg，而 bg 则表示一个数据对象。

class="title" :class="[isSelected ? 'selected' : '', 'bg']">{{title}}</div>

class="title" :class="[isSelected ? 'selected' : '', bgClass]">{{title}}</div>

.bg { background-color: grey;}.selected {   color: green;}

const obj = { el: '#app', data: function () { return { title: '前端小课', isSelected: true,            isSmall: false,            bgClass: { bg: true }, }    }}const vm = new Vue(obj);

最终渲染结果都是：

class="title selected bg">前端小课

5、自定义组件添加 class给自定义组件添加 class，会被添加到组件的根节点上。

class="love-color">lovue>

Vue.component('lovue', {    template: '<p class="love-title">    Vue 虚拟实验室 by    <span>Lovuespan>p>'});

.love-title { font-size: 30px; color: #000;}.love-color { color: red;}

最终渲染结果：

<p class="love-title love-color">Vue 虚拟实验室 by<span>Lovuespan>p>

6、style

style 也是修改样式的一把好手，Vue 提供了与 Class 一致的功能，比如直接使用 data 中的属性 titleStyle，使用计算属性 nameStyle。

<div :style="{color: activeColor, fontSize: size + 'px'}">前端小课div><div :style="titleStyle">前端小课div><div :style="nameStyle">前端小课div>

const obj = { el: '#app', data: function () { return { title: '前端小课', activeColor: 'red', size: 26, titleStyle: { color: 'red', fontSize: '26px' } } }, computed: { nameStyle: function () { return { color: 'red', fontSize: '26px' } } }}const vm = new Vue(obj);

7、style 和 class 后都可以使用过滤器

这一点在 class 中没有举例，但同样适用于 class。

<div :style="size | nameFStyle">前端小课div>

const obj = { el: '#app', data: function () { return { title: '前端小课', size: 26, } }, filters: { nameFStyle: function (size) { return { color: 'red', fontSize: size + 'px' } } }}

8、使用多个样式

同时使用 baseStyle 和 bgStyles。

 <div v-bind:style="[baseStyles, bgStyles]">我是样式属性div>

const obj = { el: '#app', data: function () { return { title: '前端小课', baseStyles: { color: 'red', fontSize: '20px' }, bgStyles: { backgroundColor: 'blue' } } }}const vm = new Vue(obj);

总之，Vue 通过 class 和 style 修改样式，可以使用计算属性、过滤器、三元表达式、data 属性来达到动态修改 CSS 样式和布局，最终达到在不操作 DOM 的情况下完成 jQuery 的工作。

推荐阅读：

第六阶段 · 期待已久的 Vue

学习 Vue 从如何贡献代码开始

创建第一个 Vue 项目

一个页面 Vue 实例只能有一个吗？

动静结合 · Vue 模板