Vue 学习笔记4 —— 绑定 Class 和 Style

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>