Vue 动态绑定类名

 1 
 2 
 3 
 4     
 5     
 6     
 7     
 8 
 9 
10     

11         
动态 CSS CLASS 
12         
13         
 示例 1
14         

15             你妹的
16         
17         
18         

19             你妹的
20         
21 
22         
示例 2 false  静态更改 样式
23         
示例 2 true，查看样式注意有什么不同之处
24 
25 
26          change color
27          change length
28         

29             大哥哥
30         
31     
32 
33 
34     
35 
36 

类名动态绑定 HTML

 1 new Vue({
 2     el:'#vue-app',
 3     data:{
 4         changeColor:false,
 5         changeLength:false
 6     },
 7     methods:{
 8 
 9     },
10     computed:{
11         compClasses:function(){
12             return {
13                 changeColor:this.changeColor,
14                 changeLength:this.changeLength
15             }
16         }
17     }
18 
19 })

Vue.js

 1 span{
 2     background:red;
 3     display:inline-block;
 4     padding:10px;
 5     color:#fff;
 6     margin: 10px 0;
 7 }
 8 
 9 .changeColor span{
10     background:green;
11 }
12 
13 .changeLength span:after{
14     content:"length";
15     margin-left:10px;
16 }

CSS

 

转载于:https://www.cnblogs.com/yanxiatingyu/p/9458126.html