Vue Class 与 Style 绑定

Class 与 Style 绑定

由于 class 和 style 是比较常用的属性，Vue 对这两个做了增强，我们先来看一下不做加强时的用法。

<style>
    .dark {
        /*背景设置为灰色*/
        background-color: darkgray;
    }
    .outline {
        /*边框 4 个像素*/
        border-width: 4px;
    }
</style>

<div id="app">
    <button v-bind:class="cls">{{message}}</button>
</div>

const vm = new Vue({
    el: "#app",
    data: {
        isDark:true,
        isOutline:true,
        message: 'hello world.',
    },
    computed: {
        // 计算 class 属性的值
        cls:function() {
            result = "";
            if(this.isDark == true) {
                result = result + "dark"
            }
            if(this.isOutline == true){
                result = result + " outline"
            }
            return result
        }
    }  
});

可以看到就算没有 class 和 style 的增强，我们自己算出来它们的值也是可以的。

---

class 增强

1、增强方案一 让 class 支持对象写法，对象的键用于指定 css-class 类名，值的 true 或 false 决定这个 css 样式是否生效。

<div id="app">
    <button v-bind:class="{dark:isDark,outline:isOutline}">{{message}}</button>
</div>

2、第二个更加好理解了，因为 css 中 class 可以接受多个值,所以我们直接把样子的名字写在数组里面就行了。

<div id="app">
    <button v-bind:class="[dark,outline]">{{message}}</button>
</div>

这里有一个要注意的地方因为 v-bind:class 用的还是 js 语法，所以变更名之间还是要用 , 逗号

---

style 语法

style 属性和 class 属性一样也支持了对象语法，和数组语法。

---