vue-class动态样式

class动态样式

• 方式一:动态样式绑定 :class=“变量”

<h1 :class="classN">蒹葭苍苍</h1>
<button @click="changePink">变粉</button>
<button @click="changeYellow">变黄</button>
 <script>
        // 3.实例化vue
        new Vue({
            el:'#app',
            data:{
                classN:'red lime',
            },
            methods:{
                changePink(){
                    this.classN = 'pink lime';
                },
                changeYellow(){
                    this.classN = 'yellow lime';
                }
            }
        })
    </script>

• 方式二: 动态样式绑定 :class=“三元运算符”

  <h2 :class="isShow ? 'yellow lime' : 'pink lime'">白露为霜</h2>
  <ul>
  <li v-for="(item,index) in stars" :class="index%2===0 ? 'yellow lime' : 'pink lime'">{{item}}</li>
  </ul>
   <script>
        // 3.实例化vue
        new Vue({
            el:'#app',
            data:{
                classN:'red lime',
                isShow:false,
                stars:['科比','詹姆斯','杜兰特','乔丹','张振','姚明','麦迪']
            },
            methods:{
                changePink(){
                    this.classN = 'pink lime';
                },
                changeYellow(){
                    this.classN = 'yellow lime';
                }
            }
        })
    </script>

• 方式三: 动态样式绑定 :class="{key:true,key1:false}"

<div :class="{red:true,pink:false,lime:true}">所谓伊人,在水一方</div>

<!-- 
科比  0    0%3===0
詹姆斯 1   1%3===1
杜兰特 2   2%3===2
-->
<ul>
<li v-for="(item,index) in stars" :class="{yellow:index%3===0,pink:index%3===1,red:index%3===2,lime:true}">{{item}}</li>
</ul>
<script>
        // 3.实例化vue
        new Vue({
            el:'#app',
            data:{
                classN:'red lime',
                isShow:false,
                stars:['科比','詹姆斯','杜兰特','乔丹','张振','姚明','麦迪']
            },
            methods:{
                changePink(){
                    this.classN = 'pink lime';
                },
                changeYellow(){
                    this.classN = 'yellow lime';
                }
            }
        })
    </script>