webveuje/vue/class和style绑定.md

class 和 style绑定

绑定HTML class

• 对象语法

  • 给v-bind:class 传入一个对象 来动态切换class

    v-bind:class="{类名:判断条件}"

    <div v-bind:class="{ active: isActive }"></div>
    

    表示active这个class是否存在 取决于isActive 的值转化过后是否为true

  • 传入更多字段来切换多个class

    <div
      v-bind:class="{ active: isActive, 'text-danger': hasError }"
    ></div>
    

    附带如下 data

    data: {
      isActive: true,
      hasError: false
    }
    

    元素渲染结果为：

    <div class="active"></div>
    

    如果data 中的hasError的值变成 true

    元素的渲染结果为：

    <div class="active text-danger"></div>
    

  • v-bind:class 可以和元素上普通的class属性并存

    <div
      class="static"
      v-bind:class="{ active: isActive, 'text-danger': hasError }"
    ></div>
    

    附带如下data:

    data: {
      isActive: true,
      hasError: false
    }
    

    元素的渲染结果为：

    <div class="static active"></div>
    

• 数组语法

  • 可以把一个数组传给 v-bind:class

    v-bind:class="[第一个类名, 第二个类名]"

    <div v-bind:class="[activeClass, errorClass]"></div>
    

    data: {
      activeClass: 'active',
      errorClass: 'text-danger'
    }
    

    渲染结果为：

    <div class="active text-danger"></div>
    

  • 在数组中用对象语法

    <div v-bind:class="[{ active: isActive }, errorClass]"></div>
    

绑定内联样式

• 对象语法

  • 用javascript 对象表达css属性（不推荐）

    v-bind:style="{css属性名: data中定义的属性值}"

    示例：

    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
    

    附data:

    data: {
      activeColor: 'red',
      fontSize: 30
    }
    

  • 直接绑定到一个样式对象上（推荐） v-bind:style="data中的数据"

    <div v-bind:style="styleObject"></div>
    

    附data：

    data: {
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }
    }
    

  • 绑定多个style对象

    <div v-bind:style="[static,choose]"></div>
    

    data: {
      static: {
        fontSize: '13px'
        border:'1px solid red'
      },
      choose:{
      	color:'red'
      }
    }