动态class说明我们之前学习的vue基础碧血的指令我们就学习完了.大家可以把折叠案例反复做一下.下面我们来学习vue

说明我们之前学习的vue基础碧血的指令我们就学习完了.大家可以把折叠案例反复做一下.下面我们来学习vue里面的基础api

动态class

用v-bind给标签设置动态的值

语法

格式1 : < 标签 :class = "变量">
格式2 : < 标签 :class = "{变量名1:布尔值,变量名2:布尔值}"/> -如果布尔值为true,就添加对应的类名说明:可以和动态class共存.

示例代码

<style>

        #app{width:500px;margin:50px auto;border:3px solid red;}
        .box{
           border:3px solid black;
           margin:5px;
        }
        .bg-blue{
            background-color: blue;
        }
        .bg-green{
            background-color: green;
        }
        .fs20{font-size:20px;}
        .tr{text-align: right;}
    </style>
</head>
<body>
  
    <div id="app">
        <h3 class="title">v-bind-绑定class</h3>
        <!-- 元素自有class和v-bind绑定的class会协同工作，一起生效 -->
        <div class="box" v-bind:class="cla ? 'bg-blue': 'bg-green'">
            1. 三元表达式
        </div>

        <!-- 如果对象中的属性值是true,
            则把对象中的属性名添加到类名中 -->
        <div class="box" :class="claObj">
            2. 绑定对象
        </div>

        <!-- 数组中元素是字符串，
            它会把所有的元素全添加到class中 -->
        <div class="box" :class="claArr">
            3. 绑定数组
        </div>
        <button @click="hAddClass">补充一个class</button>
    </div>
    <script>
        // v-bind 是用来动态绑定元素的属性，而class也是元素的属性
        // 目标： 可以通过动绑定class来控制样式 。

        // 方式：
        // 1. 三元表达式
        // 2. 绑定对象
        // 3. 绑定数组

        const vm = new Vue({
            el: "#app",
            // el: document.getElementById("app"),
            data: {
                cla: false,
                claObj: {
                    fs20: true,
                    tr: true
                },
                claArr:['fs20','tr', 'abc']
            },
            methods: {
                hAddClass () {
                    // 向数组中添加一个类 'c-red'
                    this.claArr.push('c-red')
                }
            }
        })
    </script>

就是把类名保存在vue变量中赋予给标签.