之前拷贝到编辑器,运行即可查看到对应效果
<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>增加class</title>
   <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
   <style>
    .red{color: red}
 </style>
 </head>
 <body>
   <div id="app">  
     <p v-for='(data,key,index) in datas' v-on:click="addClassFun(index)" v-bind:class='{red:index==qwerqwre}'>{{data.data}}</p>  
   </div>  
  <script>
    new Vue({  
     el: '#app',  
     data: {  
       datas: {  
         data1: {  
           data: "AAA",  
           ifAdd: 0  
         },  
         data2: {  
           data: "测试",  
           ifAdd: 1  
         },  
         data3: {  
           data: "VVV",  
           ifAdd: 2  
         }  
       },  
       qwerqwre:"2"  
     },  
     methods: {  
       addClassFun: function(index) {  
         this.qwerqwre = index;  
         console.log("看看qwerqwre"+qwerqwre)
       }  
     }  
   })  
 </script>
 </body>
 </html>
                










