Vue中动态绑定class样式Vue中动态绑定class样式Vue中动态绑定class样式给循环出来的元素添加不同的cl

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <title>class和style属性</title>

        <script src="js/vue.js"></script>

        <script>

                window.onload=function(){

                        let vm=new Vue({

                                el:'#itany',

                                data:{

                                        bb:'aa',

                                        dd:'cc',

                                        flag:true,

                                        num:-2,

                                        hello:{aa:true,cc:true},

                                        xx:{color:'blue',fontSize:'30px'},

                                        yy:{backgroundColor:'#ff7300'}

                                }

                        });

                }

        </script>

        <style>

                .aa{

                        color:red;

                        font-size:20px;

                }

                .cc{

                        background-color:#ccc;

                }

        </style>

</head>

<body>

        <div id="itany">

                <!--

                        class属性

                 -->

                <!-- <p class="aa">南京网博</p> -->  <!-- 可以访问，普通css方式 -->


                <!-- <p :class="aa">南京网博</p> --> <!-- 不可以，Vue的属性绑定时不能直接css样式 -->

  

                <!-- 方式1:变量形式 -->

                <!-- <p :class="bb">南京网博</p> -->

  

                <!-- 方式2：数组形式，同时引用多个 -->

                <!-- <p :class="[bb,dd]">南京网博</p> -->


  
                <!-- 方式3：json形式，常用！！！ -->

                <!-- <p :class="{aa:true,cc:flag}">南京网博</p> -->

                <p :class="{aa:num>0}">南京网博</p> <!--num不大于0，即返回false所以等价于aa:flase-->
                
                

                <!-- 方式4：变量引用json形式 -->

                <!-- <p :class="hello">南京网博</p> -->

        </div>

</body>

</html>

给循环出来的元素添加不同的class样式

<div class="section" :class="'pages'+item.activeClass" v-for="(item,index) in anchors"> </div> 
data(){ 
    anchors: [ 
        { page:'page1', activeClass:'1', },
        { page:'page2', activeClass:'2', }, 
        { page:'page3', activeClass:'3', } 
    ]
}