让 Class 与 Style 动起来

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

素燕感悟

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

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

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

<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);

最终渲染结果为:

<div class="title blue">前端小课</div>

2、直接使用 data 中的数据

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

<div 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);

最终渲染结果:

<div class="title small">前端小课</div>

3使用计算属性

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

<div 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);

最终渲染结果:

<div class="title blue">前端小课</div>

4、三元表达式与多个 class

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

<div class="title" 
:class="[isSelected ? 'selected' : '', 'bg']">
{{title}}</div>
<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);

最终渲染结果都是:

<div class="title selected bg">前端小课</div

5自定义组件添加 class

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

<lovue class="love-color"></lovue>
Vue.component('lovue', {
    template: '<p class="love-title">
    Vue 虚拟实验室 by
    <span>Lovue</span></p>'
});
.love-title {
    font-size: 30px;
    color: #000;
}
.love-color {
    color: red;
}

最终渲染结果:

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

6style

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

<div :style="{color: activeColor, 
fontSize: size + 'px'}">
前端小课</div>
<!-- data 属性 -->
<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);

7style 和 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 模板

发布了137 篇原创文章 · 获赞 1 · 访问量 2474
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览