一 :Class绑定

可以根据data中的值让样式显示与否

<!-- isActive是data中的变量 决定类名是否加上 -->
<div :class="{active:isActive}"></div>

<!-- 可以同时绑定多个,用逗号隔开 -->
<div :class="{active:isActive,active1:hasError }"></div>

 <!-- data中的数据 -->
data(){
       return {
        isActive: true,
        hasError: false
              }
       }
      
 <!-- 最终在页面会渲染 -->
 <div class="active"></div>

写在data中的类名

<!-- 可以同时绑定多个,用逗号隔开 -->
<div :class="classObj"></div>

 <!-- data中的数据 -->
data(){
       return {
            classObj:{
                active: true,
                active1: true
                      }
              }
       }
      
 <!-- 最终在页面会渲染 -->
 <div class="active active1"></div>

也可以使用计算属性来控制,更加的灵活

<!-- 可以同时绑定多个,用逗号隔开 -->
<div :class="classObj"></div>

 <!-- data中的数据 -->
data(){
       return {
                isActive: true,
                hasError: true
              }
       }
 computed: {
  classObj: function () {
    return {
      active: this.isActive ,
      active1: this.hasError 
    }
  }
}
      
 <!-- 最终在页面会渲染 -->
 <div class="active active1"></div>

二 :Style绑定

可以根据data中的值让样式显示与否,也可以使用三元表达式

<!-- isActive是data中的变量 决定样式的数值多少 -->
<div :style="{width:isActive}"></div>

<!-- 可以同时绑定多个,用逗号隔开 -->
<div :class="{width:isActive,height:isActive }"></div>

<!-- 也可以使用三元表达式决定使用什么-->
<div :class="{color:hasError?'red':'green' }"></div>

 <!-- data中的数据 -->
data(){
       return {
        isActive: '400px',
        hasError: false
              }
       }
      

可以在data数据中写

<div :style="styleObj"></div>


 <!-- data中的数据 -->
data(){
       return {
                styleObj:{
                             color:'red',
                             width:'400px'
                         }
              }
       }
      

## 绑定style和class还有其他方法,这里就列举比较常用的方法出来