vue-class和style样式绑定

前言

　　操作元素的 class 样式列表和 style 内联样式为数据绑定是前端开发中一个常见的需求，这些样式都属于元素的属性 attribute ，因此我们可以通过 v-bind 来动态绑定元素的样式属性。本文来总结一下这两个属性相关的知识点，便于日后的复习学习。

正文

　　1.class的动态绑定

　　（1）对象语法，即class动态绑定一个对象。

   <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        }
    </style>
    <div id="app">
        <!-- 绑定html clas样式 -->
        <div :class="{red:isRed,green:isGreen}">对象语法1</div>
        <div :class="classObj1">对象语法2</div>
        <div :class="classObj2">对象语法3</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    isRed: true,
                    isGreen: false,
                    classObj1: {
                        red: true,
                        green: false,
                    },
                }
            },
            computed: {
                classObj2() {
                    return {
                        red: true,
                        green: false,
                    }
                },
            },
        })
    </script>

　　运行结果如下：

　　对于对象语法1：class 绑定一个字面量类型的对象值，其中 red 属性值为 true，green 属性值为 false ，最终结果为绑定了red类选择器的样式。

　　对于对象语法2和语法3：class 绑定一个对象的名，并非具体的对象的值，该键名对应了具体的对象value值，该对象的 red 属性为true，green属性为false，最终结果为绑定了red类型选择器的样式，语法2和语法3的区别在于对象的声明在计算属性还是data中。

　　（2）数组语法，即class动态绑定一个数组类型

   <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        }
    </style>
    <div id="app">
        <!-- 绑定html clas样式 -->
        <div :class="[classRed,classGreen]">数组语法1</div>
        <div :class="[isRed?'red':'']">数组语法2</div>
        <div :class="classArr">数组语法3</div>
        <div :class="[{red:isRed},classGreen]">数组中对象混合用法</div>
    </div>
     <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    isRed: true,
                    isGreen: false,
                    classRed: "red",
                    classGreen: "green",
                    classArr:["red","green"],
                }
            }
        })
 
    </script>

　　运行结果如下：

　　对于数组语法1：class绑定一个数组值，其中数组中的元素代表每一个类选择器的样式，最终绑定结果为red和green选择器的样式，当color样式重复，页面渲染后面的样式，颜色为绿色。

　　对于数组语法2：class绑定一个数组值，只有一个元素，第一个元素由条件表达式确定。样式渲染如上。

　　对于数组语法3：class绑定一个数组名，并非具体的数组值，该名对应了具体的数组 value 值。

　　对于数组语法4：class绑定一个数组，数组中第一个元素为一个对象，不难理解。

　　（3）代码中常用的样式绑定

    <style>
        .red {
            color: red;
        }
    </style>
     <div id="app">
        <div :class="isRed?'red':''">代码中常用class绑定</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    isRed: true,
                }
            }
        })
    </script>

　　运行结果如下：

　　2.style的动态绑定

    <div id="app">
        <!-- 绑定内联样式 -->
        <div :style="{color:styleRed}">对象语法1</div>
        <div :style="styleObj1">对象语法2</div>
        <div :style="styleObj2">对象语法3</div>
        <div :style="[styleObj1]">数组语法</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    styleRed: "red",
                    styleObj1: {
                        color: "red"
                    }
                }
            },
            computed: {
                styleObj2() {
                    return {
                        color: "red"
                    }
                }
            },
        })
    </script>

　　运行结果如下：

　　style动态绑定样式，不需要再style标签中添加对应的类选择器，和原生js修改css样式十分接近。

写在最后

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。