vue的class绑定v-bind:class 指令也可以与普通的 class 属性共存\ <div class="pu

v-bind:class 指令也可以与普通的 class 属性共存
<div class="putong" v-bind:class="msg1">{{msg2}}</div>
class的属性值可以是数组，存储多个类名
<div :class="['putong',msg3,msg1]">{{msg4}}</div>
class的属性值可以是对象，存储多个类名，而对象的属性值是布尔值，true表示有这个属性，false表示没有这个属性
<div :class="{putong:n,box5:true}">123</div>

<body>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
    <style>
        .putong {
            width: 100px;
            height: 100px;
            border: 1px solid;
        }
        /* 对有vue指令的v-bind:class="msg1"进行修饰 */
        .user {
            background-color: #ccc;
            font-weight: bolder;
        }
        /* class为数组 */
        .box3{
            background-color: rgb(250, 215, 247);
        }
        .box5{
background-color: aquamarine;
        }
    </style>
    <div id="app">
        <div class="putong">{{msg}}</div>
        <!-- v-bind:class 指令也可以与普通的 class 属性共存 -->
        <div class="putong" v-bind:class="msg1">{{msg2}}</div>
        <!-- class的属性值可以是数组，存储多个类名 -->
        <div :class="['putong',msg3,msg1]">{{msg4}}</div>
        <!--class的属性值可以是对象，存储多个类名，而对象的属性值是布尔值，true表示有这个属性，false表示没有这个属性  -->
        <div :class="{putong:n,box5:true}">123</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 12,
                msg1: "user",
                msg2: "class 属性进行绑定",
                msg3:"box3",
                msg4:"class为数组",
                n:true,
                msg5:"class为对象"
            }
        })
    </script>
</body>