04.vue-charp-04 v-bind及其class与style绑定

Z时代
2024-01-10
分类：综合

vue

了解v-bind指令
- 绑定class的几种方式
  - 对象语法
- 数组语法
- 在组件上使用

绑定内联样式（v-bind:style）

源码地址

我们已经介绍了指令v-bind的基本用法以及它的语法糖，它的主要用法是动态更新HTML元素上的属性

在数据绑定中，最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定，它们也是HTML的属性，因此可以使用v-bind指令。我们只需要用v-bind计算出表达式最终的字符串就可以，不过有时候表达式的逻辑较复杂，使用字符串拼接方法较难阅读和维护，所以Vue.js增强了对class和style的绑定。

绑定class的几种方式

对象语法

使用data

<body>
    <div >
        <div class="class1" :class="{'class2':hasClass2, 'class3':hasClass3}">对象语法:使用data </div>
    </div>
    <script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                hasClass2: true,
                hasClass3: false
            }
        })
    </script>
</body>

html 被渲染为：

   <div class="class1" :class="{'class2':hasClass2, 'class3':hasClass3}">对象语法:使用data </div>

使用计算属性

 <div class="class1" :class="classesOfcomputed">对象语法:使用计算属性 </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                hasClass2: true,
                hasClass3: false
            },
            computed: {
                classesOfcomputed: function () {
                    //返回一个对象
                    return {
                        'class2': this.hasClass2,
                        'class3': this.hasClass3
                    }
                }
            },
        })
    </script>

html 被渲染为：

<div class="class1" :class="classesOfcomputed">对象语法:使用计算属性 </div>

数组语法

 <div >
        <div class="class1" :class="[class4, class5]">数组语法:使用data </div>
        <div class="class1" :class="[{'class2':hasClass2}, class3]">数组语法中使用对象语法（使用data） </div>
        <div class="class1" :class="[classesOfcomputed]">数组语法中使用对象语法 （使用计算属性）</div>
    </div>
    <script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                hasClass2: true,
                class3: 'class3-value',
                class4: 'class4-value',
                class5: 'class5-value',
                size: 'large',
                disabled: true
            },
            computed: {
                classesOfcomputed: function () {
                    //返回一个对象
                    return [
                        'btn',
                        {
                            ['btn-' + this.size]: this.size != '',
                            ['btn-disabled']: this.disabled
                        }
                    ]
                }
            },
        })
    </script>

html渲染为：

<div >
    <div class="class1 class4-value class5-value">数组语法:使用data </div>
    <div class="class1 class2 class3-value">数组语法中使用对象语法（使用data） </div>
    <div class="class1 btn btn-large btn-disabled">数组语法中使用对象语法 （使用计算属性）</div>
</div>

使用计算属性给元素动态设置类名，在业务中经常用到，尤其是在写复用的组件时，所以在开发过程中，如果表达式较长或逻辑复杂，应该尽可能地优先使用计算属性

在组件上使用

仅适用于自定义组件的最外层是一个根元素

<body>
    <div >
        <my-component :class="{'class2':hasClass2}"></my-component>
    </div>
    <script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
    <script>
        //定义全局组件
        Vue.component('my-component', {
            template: '<p class="class1">这种用法仅适用于自定义组件的最外层是一个根元素，否则会无效，</p>'
        })
        var app = new Vue({
            el: '#app',
            data: {
                hasClass2: true
            }
        })
    </script>
</body>

html渲染为：

<p class="class1 class2">这种用法仅适用于自定义组件的最外层是一个根元素，否则会无效，</p>

这种用法仅适用于自定义组件的最外层是一个根元素，否则会无效，当不满足这种条件或需要给具体的子元素设置类名时，应当使用组件的props来传递。这些用法同样适用于下一节中绑定内联样式 style的内容。

绑定内联样式（v-bind:style）

使用v-bind:style

<body>
    <div >
        <div style="margin:50px;" :style="{'color':color, 'font-size':fontSize}">:style绑定样式（使用data）</div>
        <div style="margin:50px;" :style="styles">:style绑定样式(使用数组对象)</div>
    </div>
    <script src="../node_modules/_vue@2.6.11@vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                color: 'red',
                fontSize: 14 + "px",
                styles: {
                    color: 'blue',
                    fontSize: 30 + "px"
                }
            }
        })
    </script>
</body>