22.Vue绑定class样式

未来@音律

已于 2022-06-17 11:07:52 修改

阅读量1k

点赞数 1

分类专栏： Vue全家桶从入门到精通文章标签： vue.js css css3

于 2022-06-17 11:07:26 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_37050372/article/details/125274989

版权

Vue全家桶从入门到精通专栏收录该内容

39 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了Vue中动态绑定class样式的三种方法：字符串写法、数组写法和对象写法。通过实例详细讲解了如何根据需求切换和组合样式，避免直接操作DOM，符合Vue的数据驱动理念。

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

1.绑定class样式-字符串写法（适用于样式的类名不确定，需要动态指定）

2.绑定class样式-数组写法（适用于样式的个数不确定，名字也不确定）

3.绑定class样式-对象写法（适用于样式的个数确定，名字也确定，但要动态决定用不用）

为了讲好class样式，我们这里提前准备了7个样式作为例子来讲解。

        .basic{
            width:400px;
            height:100px;
            border: 1px solid black;
        }

        .happy{
            border:4px solid red;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }

        .sad{
            border:4px dashed rgb(2,197,2);
            background-color: gray;
        }

        .normal{
            background-color: skyblue;
        }

        .add1{
            background-color: yellowgreen;
        }

        .add2{
            font-size: 30px;
            text-shadow: 2px 2px 10px red;
        }

        .add3{
            border-ra