从0开始学习vue第五节，Class与Style绑定

码小飞飞飞飞

已于 2024-01-06 12:14:14 修改

阅读量69

点赞数 2

分类专栏： vue 文章标签： vue.js 学习 javascript

于 2023-09-30 23:55:16 首次发布

本文链接：https://blog.csdn.net/qq_34776150/article/details/133445305

版权

vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

html标签的class和style虽然也是属性，可以使用v-bind进行属性绑定，但是需要进行字符串拼接才可以。当遇到比较复杂的样式或类的组合时，需要拼接很复杂的字符串，容易出错，因此vue为class和style的绑定提供了特殊语法来增强v-bind的功能。针对这两个属性的属性绑定不仅可以传递字符串，还可以传递对象或数组。

1. Class绑定

1.1 绑定对象

当我们为class属性绑定对象时，传入一个对象。对象的每个属性值必须是一个boolean类型的值，值可以是一个三目表达式、字面值、函数运算结果等。

<div :class="{ active: isActive }"></div>

当isActive结果为true时，该div上会应用名为active的class样式，当结果为false时，该div上的active样式会被去掉。

我们还可以将一个data中的对象传入，

<html>
    <header>

    </header>
    <body>
        <div id="root">
            <p :class="classObj">自定义p标签</p>
        </div>
    </body>
    <script src="./js/vue.global.js"></script>
    <script>
        let vue = Vue.createApp({
            data() {
                return {
                    classObj: { 'active': true }
                }
            }
        });
        vue.mount('#root')
    </script>
    <style>
        .active {
            color: red;
            text-decoration: solid;
        }
    </style>
</html>

也可以通过方法或计算属性的方式返回一个对象，然后在:class中进行样式绑定。

1.2 绑定数组

我们也可以传入一个数组进行属性绑定。传入的数组中的每个元素可以是一个上述的绑定对象，也可以是一个value为字符串的属性（字符串就是类选择器的类名，默认不可进行是否应用该类选择器样式的设置）。

<html>
    <header>

    </header>
    <body>
        <div id="root">
            <p :class="[classObj,dengerClass]">自定义p标签</p>
        </div>
    </body>
    <script src="./js/vue.global.js"></script>
    <script>
        let vue = Vue.createApp({
            data() {
                return {
                    classObj: { 'active': true },
                    dengerClass: 'denger'
                }
            }
        });
        vue.mount('#root')
    </script>
    <style>
        .active {
            color: red;
            text-decoration: solid;
        }
        .denger {
            background-color: black;
        }
    </style>
</html>

无论数组绑定还是对象绑定，:class均可配合正常class属性使用
<div :class="{ active: isActive }" class="text"></div>
当isActive为true时，该div最终会被渲染为
<div class="active text"></div>

2. Style绑定

2.1 绑定对象

与class绑定类似，style也可以绑定对象，只是style绑定的对象值为具体的css属性

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

同样，style绑定的也可以是data中声明好的对象、普通方法返回的对象、计算属性返回的对象等。

2.2 绑定数组

:style可以以数组的方式同时绑定多个样式对象
<div :style="[baseStyles, overridingStyles]"></div>

同样地:style绑定也可以配合style属性进行组合使用，在此不再赘述

码小飞飞飞飞

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
从0开始学习vue第五节，Class与Style绑定

html标签的class和style虽然也是属性，可以使用v-bind进行属性绑定，但是需要进行字符串拼接才可以。当遇到比较复杂的样式或类的组合时，需要拼接很复杂的字符串，容易出错，因此vue为class和style的绑定提供了特殊语法来增强v-bind的功能。针对这两个属性的属性绑定不仅可以传递字符串，还可以传递对象或数组。
复制链接

扫一扫