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