1. 绑定 HTML Class
# 对象语法
可以传给 v-bind:class
一个对象,动态切换 class,属性名为类名,属性值为 true
则类有效:
<div id="root" class="A" v-bind:class="classObject"></div>
let vm = new Vue({
el: "#root",
data: {
isActive: true,
classObject: {
active: isActive,
selected: false
}
}
})
isActive 可以根据程序逻辑控制 active 类名是否有效。
从而控制样式,也可以直接对象插入到 HTML:
<div class="A" v-bind:class="{active: isActive, selected: false}"></div>
渲染结果等价于:
<div class="A isActive"></div>
举个栗子
点击后添加 active
类:
.active {
color: red;
font-weight: bold;
}
<p id="text" :class="{active: isActive}" @click="handleActive">this is text</p>
let vm = new Vue({
el: "#text",
data: {
isActive: false
},
methods: {
handleActive: function() {
this.isActive = true;
}
}
})
# 数组语法
可以将类名变量放在数组内:
<div v-bind:class="[class1, class2]"></div>
<script>
let vm = new Vue({
el: "#root",
data: {
class1: 'active',
class2: 'selected'
}
})
</script>
数组语法和对象语法可以混合:
<div v-bind:class="[{active: isActive}, selected]">
</div>
举个栗子
<p id="text" :class="[class1]">this is text</p>
let vm = new Vue({
el: "#text",
data: {
class1: 'active'
}
})
上面的代码等价于:
<p id="text" :class="['active']">this is text</p>
2. 绑定内联样式
# 对象语法
可以将 CSS 对象插入到 html,也可以在 data 声明对象:
<div v-bind:style="style1"></div>
data: {
style1: {
color: 'red',
fontWeight: bold
}
}
# 数组语法
类似上面的对象语法:
<div v-bind:style="[style1, style2]"></div>
举个栗子
<p id="text" :style="style1, style2">this is text</p>
<script>
let vm = new Vue({
el: "#text",
data: {
class1: 'active',
style1: {
color: 'green',
fontWeight: 'bold'
},
style2: {
backgroundColor: '#666'
}
}
})
</script>