v-bind 及 class 与 style 绑定
1. 绑定 class 的集中方式
1.1. 对象语法
给class设置一个对象,可以动态切换class。例如:
var app = new Vue({
el: '#app',
data: {
isActive: true
}
});
示例中,类名active依赖数据isActive,当isActive的值为true时,div标签会拥有active类,否者没有。最终渲染效果如下:
对象中也可以传入过个属性,可以动态切换class。此外,:class可以与普通class共存,例如:
var app = new Vue({
el: '#app',
data: {
isActive: true,
isError: false
}
});
当:class的表达式过长或者逻辑复杂时,还可以绑定一个计算属性,一般当条件多于两个小时,都可以使用data或computed,例如计算属性:
var app = new Vue({
el: '#app',
data: {
isActive: true,
error: null
},
computed: {
classes: function() {
return {
active: this.isActive && !this.error,
'text-fial': this.error && this.error.type === 'fial'
}
}
}
});
除了计算属性,还可以绑定一个Object类型的数据,或者使用类似计算属性的methods。
1.2. 数组语法
当你要应用多个class时,可以使用数组语法,给:class绑定一个数组,应用一个class列表:
var app = new Vue({
el: '#app',
data: {
isActive: true,
error: null
},
computed: {
classes: function() {
return {
activeCls: 'active',
errorCls: 'error'
}
}
}
});
渲染结果为:
还可以使用三元表达式来切换class,例如:
var app = new Vue({
el: '#app',
data: {
isActive: true,
error: null
},
computed: {
classes: function() {
return {
isActive: true,
errorCls: 'error',
activeCls: 'active'
}
}
}
});
当然这样写也比较麻烦,可以在数组语法中使用对象语法:
var app = new Vue({
el: "#app",
data: {
isActive: true,
error: null
},
computed: {
classes: function() {
return {
isActive: true,
errorCls: "error"
};
}
}
});
使用计算属性可以给元素动态的设置类名,在业务中经常用到,尤其是在写复用的组件时,所以在开发过程中,如果表达式较长或逻辑复杂,应该尽可能地优先使用计算属性。
1.3. 组件上使用
如果直接在自定义组件上使用class或:class,样式规则会直接应用到这个组件的根元素上,例如:
ponent("my-component", {
template: '
一些文本
'
});
var app = new Vue({
el: "#app",
data: {
isActive: true,
error: null
},
computed: {
classes: function() {
return {
isActive: true
};
}
}
});
最终渲染结果是:
一些文本
这种用法仅仅适合自定义组件的最外层是一个根元素,否者无效,当不满足这种条件还需要给子元素设置类名,那就需要借助于props来传递。
这种方式后续会讲解,此处不做详述。
1.4. 绑定内联样式
使用v-bind:style即:style可以给元素绑定内联样式,方法与:class类似,也有对象和数组语法。例如:
文本
ponent("my-component", {
template: '
一些文本
'
});
var app = new Vue({
el: "#app",
data: {
color: 'red',
fontSize: 14
}
});
CSS属性名称使用驼峰命名(camelCase)或短横线分隔命名(kebab-case),渲染后的结果为:
文本
很多时候样式都比较多,不方便维护,所以一般写在data或者computed里,以data为例改写示例:
文本
var app = new Vue({
el: "#app",
data: {
styles: {
color: 'red',
fontSize: 14 + 'px'
}
}
});
应用多个样式对象时,可以使用数组语法:
文本
在实际业务中,:style的数组语法并不常用,往往可以将样式写在一个对象里;比较常用的应当是计算属性。
2. 章节总结
本章主要讲了类名和样式的绑定,以及一个常用的绑定方式。在后面的内容中,将继续穿插使用这些特性。
当你的才华撑不起自己的野心,那就努力学习吧!