绑定 html class,VueJs 绑定 HTML Class 综合练习

操作元素的 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: '

Hi

'

})

然后在使用它的时候添加一些 class：

HTML 将被渲染为:

Hi

2、对于带数据绑定 class 也同样适用：

当 isActive 为 truthy[1] 时，HTML 将被渲染成为：

Hi

绑定内联样式v-bind:style

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象

{{ msg }}

new Vue({

el: "#app",

data: {

activeColor: 'red',

fontSize: 30,

msg: "hello vue"

}

})

直接绑定到一个样式对象通常更好，这会让模板更清晰：

{{ msg }}

new Vue({

el: "#app",

data: {

msg: "直接绑定到一个样式对象通常更好",

styleObject: {

color: 'red',

fontSize: '23px'

}

}

})

对象语法常常结合返回对象的计算属性使用

{{ msg }}

new Vue({

el: "#app",

data: {

msg: "结合返回对象的计算属性使用",

color: 'red',

fontSize: '12px'

},

computed: {

styleObject: function () {

return {color: 'yellow', fontSize: '23px'}

}

}

})

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

{{ msg }}

new Vue({

el: "#app",

data: {

msg: "我是数组绑定方法",

baseStyles: {

color: 'green',

fontSize: '30px'

},

overridingStyles: {

'font-weight': 'bold'

}

}

})