使用方法

绑定clss样式—字符串写法，适用于：样式的类名不确定，需要动态指定

  1. <div class="title" :class="a" @click="clickfun">内容</div>
  2. <script>
  3.     ...
  4.     data:{
  5.       a:"h1_style"
  6.   }
  7.     methods:{
  8.       clickfun(){
  9.         this.a = "h2_style"
  10.     }
  11.   }
  13. </script>

绑定clss样式—数组写法，适用于：样式的个数不确定，名字不确定

  1. <div class="title" :class="arrclass" @click="clickfun">内容</div>
  2. <script>
  3.     ...
  4.     data:{
  5.       arrclass:["h1","h2","style"]
  6.   }
  7.     methods:{
  8.       clickfun(){
  9.         this.a = "h2_style"
  10.     }
  11.   }
  13. </script>

对象写法 —- 适用于绑定个数确定，名字确定，但要动态确定用不用

  1. <div class="title" :class="arrclass" @click="clickfun">内容</div>
  2. <script>
  3.     ...
  4.     data:{
  5.       arrclass:{
  6.         h1_style:true,
  7.       h2_style:false,
  8.       h3_style:true
  9.     }
  10.   }
  11.     methods:{
  12.       clickfun(){
  13.         this.a = "h2_style"
  14.     }
  15.   }
  17. </script>

行内样式

  1. <div :style={fontSize: fsize + 'px',...}></div>
  2. <div :style="objectStyle"></div>  objectStyle:{fontSize: "20px"}
  3. <div :style="[objectStyle,objectStyle2]"></div>