2019-09-20 vue ☞ :css and :style

1.vue动态绑定css
参考

• 三目运算

HTML代码：
<div :class="classA ? 'class-a' : 'class-b' ">Demo1</div>

Javascript代码：
data: {
  classA: false,  
}

渲染后的HTML:
<div class="class-b">Demo1</div>

• 对象

HTML代码：
<div :class="objectClass">Demo2</div>

Javascript代码：
data: {
  objectClass: {
    class-a: true,
    class-b: false
  }
}

渲染后的HTML:
<div class="class-a">Demo2</div>

• computed计算属性

HTML代码：
<div :class="objectClass">Demo3</div>

Javascript代码：
data: {
    isActive: true,
    error: {
      value: true,
      type: 'fatal'
    }
  },
computed: {
    objectClass: function () {
      return {
        base: true,
        active: this.isActive && !this.error.value,
        'text-danger': this.error.value && this.error.type === 'fatal',
      }
    }
  }

渲染后的HTML:
<div class="bass text-danger">Demo3</div>

• 数组语法

HTML代码：
<div v-bind:class="[activeClass, errorClass]">Demo4</div>

Javascript代码：
data: {
  objectClass: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

渲染后的HTML:
<div class="active text-danger">Demo2</div>

2. vue动态绑定 style

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

HTML代码：
<div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>

Javascript代码：
data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
    overridingStyles: {
      'font-weight': 'bold'
    }
  }