v-bind的基本使用

v-bind的缩写

v-bind主要用于属性绑定。

完整写法

<img v-bind:src="">

代码糖

<img :src="">

v-bind动态绑定class

一、对象语法

在html中可以给v-bind:class一个对象，以动态地切换class，而且:class与普通的class可以共存。

HTML代码

<div id="app">
  <h2 class="text" :class="{'textColor': isColor, 'textSize': isSize}"></h2>
</div>

JS代码

const app = new Vue({
	el: '#app',
    data: {
      isColor: true,
      isSize: true
    }
})

HTML最终渲染成<h2 class="text isColor isSize"></h2>，若isColor和isSize的布尔值发生变化时，class将会更新，例如：把isColor的布尔值改成false，则class则变成<h2 class="text isSize"></h2>。
若属性过于复杂或者太长了，则可以放在methods中，例如：把HTML代码改为<h2 class="text" :class="getClasses()"></h2>。JS代码改为：

const app = new Vue({
	el: '#app',
    data: {
      isColor: true,
      isSize: true
    }，
    methods: {
      getClasses: funtion () {
        return {'textColor': this.isColor, 'textSize': this.isSize}
      }
    }
})

二、数组语法

在v-bind:class中也可以用一个数组进行展示。

HTML代码

<div id="app">
  <h2 class="text" :class="['aaa', 'bbb']"></h2>
</div>

JS代码

const app = new Vue({
	el: '#app',
    data: {
      aaa: 'textColor',
      bbb: 'textSize'
    }，
})

v-bind动态绑定style

一、对象语法

HTML代码

<div id="app">
  <h2 :style="{textColor: realColor, textSize: realSize}"></h2>
</div>

JS代码

const app = new Vue({
	el: '#app',
    data: {
      textColor: 'blue',
      textSize: '100px'
    }，
})

二、数组语法

HTML语法

<div id="app">
  <h2 :style="[aaa, bbb]"></h2>
</div>

JS语法

const app = new Vue({
	el: '#app',
    data: {
      aaa: {textColor: 'blue'},
      bbb: {textSize: '100px'}
    }，
})