Vue 4. class 与 style 绑定

最新推荐文章于 2023-08-31 11:33:21 发布

恋静

最新推荐文章于 2023-08-31 11:33:21 发布

阅读量172

点赞数

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

本文链接：https://blog.csdn.net/xj89959853/article/details/105106187

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

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

本文主要包含如下知识点：

绑定 HTML Class
- 对象语法
- 数组语法
绑定内联样式
- 对象语法
- 数组语法
- 自动添加前缀
- 多重值

绑定 HTML Class

对象语法

我们可以给 v-bind:class 传递一个对象，从而通过改变对象的值来动态改变 class 的值。

示例如下：

<body>
    <div id="app">
        <!-- 可以为 class 属性绑定一个对象 , 这样更加灵活 -->
        <div v-bind:class="test"></div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                // 根据 test 对象的属性决定有哪些值
                test: {
                    abc: true,
                    def: true,
                    ghi: false
                }
            }
        });
    </script>
</body>

效果：
在这里插入图片描述
如上所示，通过绑定对象的方式，让我们操作 class 变得更加的灵活。如果需要改变样式的话，直接改变对象的值就可以实现。

我们也可以为 class 绑定一个返回对象的计算属性。这是一个常用且强大的模式。

示例如下：

<body>
    <div id="app">
        <!-- 可以为 class 属性绑定一个对象 , 这样更加灵活 -->
        <div v-bind:class="test"></div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            // 通过计算属性来返回一个对象
            computed: {
                test() {
                    return {
                        abc: true,
                        def: false,
                        ghi: true
                    }
                }
            }
        });
    </script>
</body>

效果：
在这里插入图片描述

数组语法

除了对象语法以外，也可以给 class 绑定一个数组。

例如：

<body>
    <div id="app">
        <!-- 可以为 class 属性绑定一个数组
        数组中的每一项表示 data 数据的键 , 每一个键所对应的值为挂上去的样式 -->
        <div v-bind:class="[a,b,c]"></div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                a: 'abc',
                b: 'def',
                c: 'ghi'
            }
        });
    </script>
</body>

效果：
在这里插入图片描述
根据条件切换列表中的 class，可以使用三元表达式。

例如：

<body>
    <div id="app">
        <div v-bind:class="[a ? b : '',c]"></div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                a: true,
                b: 'def',
                c: 'ghi'
            }
        });
    </script>
</body>

效果：
在这里插入图片描述

绑定内联样式

除了 class 以外，内联样式也是十分常见的需求。同样，v-bind:style 也拥有对象语法和数组语法这两种方式来进行绑定。

对象语法

v-bind:style 的对象语法十分直观，看着非常像 css，但其实是一个 JavaScript 对象。

css 属性名可以用驼峰式（camelCase）或短横线分隔（kebab-case）来命名。

示例如下：

<body>
    <div id="app">
        <div v-bind:style="test">Lorem ipsum dolor sit amet.</div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                test : {
                    color : 'red',
                    fontSize : '30px'
                }
            }
        });
    </script>
</body>

效果：
在这里插入图片描述

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上。

例如：

<body>
    <div id="app">
        <!-- 同样绑定 2 套样式 -->
        <div v-bind:style="[style1, style2]">Lorem ipsum dolor sit amet.</div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                style1: {
                    color: 'red'
                },
                style2: {
                    textDecoration: 'underline'
                }
            }
        });
    </script>
</body>

效果：
在这里插入图片描述

自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 css 属性，如 transform 时，Vue 会自动侦测并添加相应的前缀。

多重值

从 2.3.0 起，可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值。

例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。

在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex

总结

操作元素的 class 列表和内联样式是数据绑定的一个常见需求，将 v-bind 用于 class 和 style 时，Vue 做了专门的增强。
可以给 v-bind:class 传递一个对象，从而通过改变对象的值来动态改变 class 的值。
可以为 class 绑定一个返回对象的计算属性，这是一个常用且强大的模式。
除了对象语法以外，也可以给 class 绑定一个数组。
除了 class 以外，内联样式也是十分常见的需求。v-bind:style 的对象语法十分直观，看着非常像 css，但其实是一个 JavaScript 对象。
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上。

恋静

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 4. class 与 style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 来处理它们，只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。本文主要包含如下知识点：绑定 HTML Class对象语...
复制链接

扫一扫