Vue中样式的使用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、四种方法？

    <!-- 数组 -->

    <!-- 三木表达式 -->

    <!-- 数组内置对象（对象的键是样式的名字，值是bool类型） -->

    <!-- d)	直接通过对象 -->

二、使用步骤

1.引入库

代码如下（示例）：

 <!-- 数组 -->
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .red {
            color: green;
        }

        .fs40 {
            font-size: 40px;
        }

 <!-- 数组 -->
        <div :class="class2">今天下雨了</div>
         const vm = new Vue({
            el: '#app',
            data: {
              
                class2: ['box', 'red'],
             
            },
            methods: {
        
            }
        })

 <!-- 三木表达式 -->
         <div :class="flag?'red':'fs40'">今天下雨了</div>
         const vm = new Vue({
            el: '#app',
            data: {
                flag: false,
               
            },
            methods: {
               
            }
        })

 <!-- 数组内置对象（对象的键是样式的名字，值是bool类型） -->
        <div :class="class3">今天下雨了</div>
         const vm = new Vue({
            el: '#app',
            data: {
              
                class3: [{ 'box': true, 'fs40': true }]
            },
            methods: {
              
                }
            }
        })

     <!-- d)	直接通过对象 -->
          <div :class="{'box':true}">今天下雨了</div>
         const vm = new Vue({
            el: '#app',
            data: {
            
            },
            methods: {
                change() {
                    // this.class1 += ' fs40'
                    this.class2.push('fs40')
                }
            }
        })