vue-07 绑定Class

使用Vue绑定class,

绑定class样式 (:class),字符串写法. 适用于: 样式类名不确定,需要动态指定

动态绑定多个class ,可以绑定一个数组属性,里面放置 样式属性

动态绑定多个class ,可以绑定一个对象属性,通过true, false设置属性

动态绑定, 使用style 直接赋值样式, style中的key代表样式的key, 如果key中包含了'-', 例如font-size则写成fontSize, value直接以字符串的形式表达

<div id="Root">
        <div class="basic happy" @click="changeMode" id="demo">
            <div>test</div>
        </div>
        <!-- 绑定class样式  (:class),字符串写法. 适用于: 样式类名不确定,需要动态指定-->
        <!-- 动态变化的样式用 :class绑定 (vue写法) -->
        <div class="basic" :class="mode" @click="changeMode2">
            <div>test22</div>
        </div>

        <!-- 动态绑定多个class ,可以绑定一个数组属性,里面放置 样式属性 -->
        <div class="basic happy" :class="arr" @click="changeMode3">
            <div>test33</div>
        </div>

        <!-- 动态绑定多个class ,可以绑定一个数组属性,里面放置 样式属性 -->
        <div class="basic happy" :class="classObjc" @click="changeMode4">
            <div>test44</div>
        </div>

  <!-- 动态绑定, 使用style 直接赋值样式, style中的key代表样式的key, 如果key中包含了'-', 例如font-size则写成fontSize, value直接以字符串的形式表达   -->
        <div class="basic happy" :style="styleObj" @click="changeMode4">
            <div>test55</div>
        </div>

    </div>

    <script>
        const vm = new Vue({
            el: '#Root',
            data: {
                mode: 'happy',
                arr: ['s1','s2'],
                classObjc: {
                    s1: true,
                    s2: true
                },
                styleObj: {
                    fontSize: '55px'
                }
            },
            methods: {
                changeMode(){
                    document.getElementById('demo').className = 'basic sad'  //不使用vue绑定样式的写法
  
                },
                changeMode2(){

                    this.mode = 'sad'
                },
                changeMode3(){

                },
                changeMode4(){
                       this.classObjc.s1 = false
                }
                
            }
            
        })
    </script>