对象处理动态样式 和 数组方式控制样式类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>watch</title>
    <style>
        .active{
            color: red;
        }
        .big{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="app">

        <!-- 1 对象处理动态样式 
         :class="{样式类名:响应式数据,...}
         响应式数据 为 true 则有这个样式  反之没有
        -->
        <!-- <p  :class="{active:a,big:true}">开心快乐每一天</p>
        <button @click="handle">切换样式</button> -->


        <!-- 2 数组方式控制样式类 
          :class="[响应式数据1,...]"
          控制响应式数据的值是对应的样式类, 或者没有值, 来 控制是否 有这个样式
        -->
        <p  :class="[active,big]">开心快乐每一天2</p>
        <button @click="handle">切换样式2</button>

 
    </div>
 
    <script src="../node_modules/vue/dist/vue.js"></script> 
    <script> 
 
        // 1   对象处理动态样式 
        // let vm = new Vue({
        //     el: "#app",
        //     data: { 
        //         a:false
        //     }, 
        //     methods:{
        //       handle(){
        //         this.a = !this.a
        //       }
        //     } 
        // });


        // 2 数组方式
        let vm = new Vue({
            el: "#app",
            data: { 
                active:'',
                big:'big'
            }, 
            methods:{
              handle(){
                this.active = this.active === '' ? 'active' : '';
              }
            } 
        });
  
    </script>
 
</body>
</html>
posted @ 2021-03-01 10:08  13522679763-任国强  阅读(124)  评论(0)    收藏  举报