操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
这是一个很大很大的H1,大到你无法想象!!!
这是一个很大很大的H1,大到你无法想象!!!
这是一个很大很大的H1,大到你无法想象!!!
这是一个很大很大的H1,大到你无法想象!!!
这是一个很大很大的H1,大到你无法想象!!!
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: { red: true, thin: true, italic: false, active: false }
},
methods: {}
});
用在组件上
1、例如,如果你声明了这个组件:
Vue.component('my-component', {
template: '
'})
然后在使用它的时候添加一些 class:
HTML 将被渲染为:
2、对于带数据绑定 class 也同样适用:
当 isActive 为 truthy[1] 时,HTML 将被渲染成为:
绑定内联样式v-bind:style
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象
new Vue({
el: "#app",
data: {
activeColor: 'red',
fontSize: 30,
msg: "hello vue"
}
})
直接绑定到一个样式对象通常更好,这会让模板更清晰:
new Vue({
el: "#app",
data: {
msg: "直接绑定到一个样式对象通常更好",
styleObject: {
color: 'red',
fontSize: '23px'
}
}
})
对象语法常常结合返回对象的计算属性使用
new Vue({
el: "#app",
data: {
msg: "结合返回对象的计算属性使用",
color: 'red',
fontSize: '12px'
},
computed: {
styleObject: function () {
return {color: 'yellow', fontSize: '23px'}
}
}
})
我们可以把一个数组传给 v-bind:class,以应用一个 class 列表
new Vue({
el: "#app",
data: {
msg: "我是数组绑定方法",
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
}
})