vue2.0+基础知识连载（05）--- 绑定class样式

本文介绍Vue2.0中绑定class样式的三种方法：使用对象语法、数组语法及直接绑定属性。通过实例展示了如何根据条件动态地为元素添加或删除样式。

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

<!DOCTYPE html>
<html>

<head>
    <title>vue2.0+基础知识连载（05）--- 绑定class样式</title>

    <style type="text/css">
        .f-size {
            font-size: 30px;
        }

        .fSize{
            font-size: 30px;
        }

        .c-red {
            color: red;
        }

        .bg-blue {
            background: blue;
        }

        .size {
            font-size: 30px;
        }

        .green {
            color: green;
        }

        .yellow {
            background: yellow;
        }
    </style>
</head>

<body>

    <h3>vue2.0+基础知识连载（05）--- 绑定class样式</h3>

    <div id='app'>
        <h5>方式一 ：对象1</h5>
        <!--<p :class='{f-size: true, c-red: true, bg-blue: true}'>测试的文字&nbsp;&nbsp;&nbsp;<span>连字符类名未加引号，无法解析，直接报错</span></p>-->
        <p :class='{fSize: true, cRed: true, bgBlue: true}'>测试的文字&nbsp;&nbsp;&nbsp;<span>把连字符类名改成驼峰式，便要在css里添加相应的驼峰式的类名，不然解析无效【如此时添加了fSize类名，生效】</span></p>
        <p :class='{"f-size": true, "c-red": true, "bg-blue": true}'>测试的文字&nbsp;&nbsp;&nbsp;<span>当类名含有连字符时，类名要加引号,不然无法解析，直接报错</span></p>
        <p :class='{size: true, green: true, yellow: true}'>测试的文字&nbsp;&nbsp;&nbsp;<span>当类名不含有连字符时，类名无需加引号</span></p>
        <p :class='{size: fsBoolean, green: cgBoolean, yellow: cyBoolean}'>测试的文字</p>
        <hr>
        <h5>方式二 ：对象2</h5>
        <p :class='classObj'>测试的文字</p>
        <hr>
        <h5>方式三 ：数组</h5>
        <p :class='[fSize, cRed, bgBlue]'>测试的文字</p>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            data: {
                /**
                 * 方式一：对象1
                 */
                fsBoolean: true,
                cgBoolean: true,
                cyBoolean: true,

                /**
                 * 方式二：对象2
                 */
                classObj: {
                    size: true,
                    green: true,
                    yellow: true
                },

                /**
                 * 方式三：数组
                 */
                fSize: 'f-size',
                cRed: 'c-red',
                bgBlue: 'bg-blue'

            }
        }).$mount('#app');
    </script>

</body>

</html>