【Vue】Class与Style的绑定 —— 绑定对象与数组不过，字符串拼接麻烦且易错. 因此，在将 v-bind 用于

引言

操作元素的 class 列表和内联样式是数据绑定的一个常见需求

因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可

不过，字符串拼接麻烦且易错. 因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强. 表达式结果的类型除了字符串之外，还可以是对象或数组。动态的绑定与修改

class绑定

绑定对象

给 :class 一个对象，以动态地切换 class，语法类似键值对, 布尔值的value决定了String类型的Key是否显示，大致语法 {className:Boolean}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>class绑定对象</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
        <style>
            .nameHide {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h1 :class="{'nameHide': nameActive}"> uiu </h1>
        </div>
        <script>
            let vm = new Vue({
                el: "#app",
                data: {
                    nameActive: false
                },
            })
        </script>
    </body>
</html>

nameActive为false时

nameActive为true时

当然,有一点很重要,那就是可以多个class并存

<h1 :class="{'nameHide': nameActive,'redFont':true}"> uiu </h1>

绑定数组

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>class绑定数组</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
        <style>
            .blueBackground {
                background-color: blue;
            }

            .redFont {
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h1 :class="[nameFontClass.Background, nameFontClass.color]"> uiu </h1>
        </div>
        <script>
            let vm = new Vue({
                el: "#app",
                data: {
                    nameFontClass: {
                        Background: "blueBackground",
                        color: "redFont"
                    }
                },
            })
        </script>
    </body>
</html>

style绑定

在前端开发中，内联样式经常被使用到，Vue 中内联样式绑定语法灵活

CSS 属性名可以用驼峰式 (camelCase) 或 短横线分隔 (kebab-case，记得用单引号括起来) 来命名.

小建议：如果，你曾使用过 React 或者将要学习它，建议采用与 React 同样的 CSS 属性代码风格驼峰式 (camelCase).

绑定对象

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>style绑定对象</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1 :style="nameStyle"> uiu </h1>
        </div>
        <script>
            let vm = new Vue({
                el: "#app",
                data: {
                    nameStyle: {
                        'background-color': 'blue',
                        'color': 'red'
                    }
                },
            })
        </script>
    </body>
</html>

绑定数组

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>style绑定数组</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1 :style="[blueBackground,redFont]"> uiu </h1>
        </div>
        <script>
            let vm = new Vue({
                el: "#app",
                data: {
                    blueBackground: {
                        'background-color': 'blue'
                    },
                    redFont: {
                        'color': 'red'
                    }
                },
            })
        </script>
    </body>
</html>

自动前缀

在开发中，由于浏览器内核不同，使用某些 CSS 属性需要带各浏览器的前缀，然而如果你在 Vue 中使用了 v-bind:style你完全不用去考虑，因为 Vue 在编译过程中，会自动给需要前缀的属性加前缀

引申知识： 通过CANIUSE查看询 CSS 属性兼容性，自动前缀包 Autoprefixer、postcss