05 vue 指令 v-bing

6/27/2021 vue

# v-bind

API — v-bind (opens new window)

基础语法

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">

<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

缩写

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>

# v-bind Class 绑定

Class 与 Style 绑定 — Vue.js (opens new window)

给 v-bind:class 一个对象,以动态地切换 class:

<div v-bind:class="{ 属性: 值 }"></div>
<div v-bind:class="{ class-name: boolean }"></div>

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

使用计算属性

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

普通 class 和 绑定 class 可以同时存在

<h2 class="large" :class="[active, line]">今天天气不错</h2>
<!-- 这里 active line 是变量 -->

# v-bind Style 绑定

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

直接绑定到一个样式对象通常更好,这会让模板更清晰:

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
更新时间: Sunday, June 27, 2021 15:46