Vue中常用绑定class的三种方法

最新推荐文章于 2025-03-15 08:00:00 发布

冒泡的大鱼

最新推荐文章于 2025-03-15 08:00:00 发布

阅读量927

点赞数

分类专栏： H5 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/y1314999/article/details/108330638

版权

H5 专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何使用指令绑定class，包括直接绑定对象、使用三元运算符以及绑定数组这三种常见方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绑定class的三种方法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
       .green{
           width: 200px;
           margin: 20px auto;
           height: 200px;
           background-color: chartreuse;
       }
       .red{
           color: crimson;
       }
       .green1{
           width: 200px;
           margin: 20px auto;
           height: 200px;
           background-color: chartreuse;
       }
       .red1{
           color: crimson;
       }
       .test1{
           width: 200px;
           margin: 20px auto;
           height: 200px;
           background-color: chartreuse;
       }
       .red2{
           color: crimson;
       }
    </style>
</head>

<body>

    <div id="app">
        <!-- 数组形式 -->
        <div :class="arr">泡泡1</div>
        <!-- <div :class="['green','red']">这是字体的颜色</div> -->

        <!-- 对象的形式 -->
        <div :class="{green1:true,red1:true}">泡泡2</div>

        <!-- 对象与数组混合的形式 -->
        <div :class="['green2','red2',{test1:true}]">  泡泡3</div>
    </div>


    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app1  = new Vue({
            el:'#app',
            data:{
                arr:['green','red']
            },
            methods:{

            }

        })
    </script>
</body>

</html>