3. 绑定属性v-bind

1. v-bind介绍

前面我们学习的指令主要作用是将值插入到我们模板的内容当中。
但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

• 比如动态绑定 a元素的 href属性
• 比如动态绑定 img元素的 src属性

这个时候，我们可以使用 v-bind 指令：

• 作用：动态绑定元素
• 缩写：:
• 预期：any (with argument) | Object (without argument)
• 参数：attrOrProp (optional)

1.1 v-bind 基础

v-bind 用于绑定一个或多个属性值，或者向另一个组件传递 props值
在开发中，有哪些属性需要动态进行绑定呢？

• 比如：图片的链接src，网站的链接href，动态绑定一些类、样式等等

比如通过 Vue实例中的data绑定元素的 src和 href，代码如下：

<div id="app">
  <!-- 错误的做法 -->
  <!-- <img src="{{imgUrl}}" > -->
  <img v-bind:src="imgUrl">
  <a v-bind:href="aHref">百度一下</a>
  <!-- 语法糖写法 -->
  <img :src="imgUrl" >
  <a :href="aHref">百度一下    </a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      aHref: 'http://www.baidu.com',
      imgUrl: 'https://cdn.acwing.com/media/user/profile/photo/15938_lg_f8f3966ec0.jpg'
    }
  })
</script>

1.2 v-bind语法糖

v-bind 有一个对应的语法糖，也就是简写方式

• 在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。

简写方式如下：

  <!-- 语法糖写法 -->
  <img :src="imgUrl" >
  <a :href="aHref">百度一下    </a>

1.3 v-bind绑定 class

很多时候，我们希望独特的来切换 class，比如：

• 当数据为某个状态时，字体显示红色。
• 当数据另一个状态时，字体显示黑色。

1.3.1 绑定class方式：对象语法

• 对象语法的含义是：class后面跟的是一个对象。

对象语法有下面这些用法：

//用法一：直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>
//用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
//用法三：和普通的类同时存在，并不冲突
//注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
//用法四：如果过于复杂，可以放在一个methods或者computed中
//注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

1.3.2 绑定class方式：数组语法

• 数组语法的含义是：class后面跟的是一个数组。

数组语法有下面这些用法：

//用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>
//用法二：也可以传入多个值
<h2 :class="[‘active’, 'line']">Hello World</h2>
//用法三：和普通的类同时存在，并不冲突
//注：会有title/active/line三个类
<h2 class="title" :class="[‘active’, 'line']">Hello World</h2>
//用法四：如果过于复杂，可以放在一个methods或者computed中
//注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

1.4 v-bind绑定 style

我们可以利用 v-bind:style 来绑定一些CSS内联样式。
在写CSS属性名的时候，比如 font-size

• 我们可以使用驼峰式（camelCase）fontSize
• 或者短横线分割（kebab-case，记得用单引号括起来）'font-size'

1.4.1 绑定style方式：对象语法

:style="{color: currentColor, fontSize: fontSize + 'px'}"

• style后面跟的是一个对象类型

  • 对象的key 是CSS属性名称
  • 对象的value是具体赋的值，值可以来自于data中的属性

    1.4.2 绑定style方式：数组语法

    <div v-bind:style="[baseStyles, overridingStyles]"></div>

• style后面跟的是一个数组类型

  • 多个值以 , 分割即可

对象语法示例：

<div id="app">
  <!-- font-size {'font-size': '26px'}/ fontSize {fontSize: '26px'}-->
  <h2 :style="{'font-size': finalSize + 'px', color: finalColor}">{{message}}</h2>
  <h2 :style="getStyles()">{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      finalSize: 26,
      finalColor: 'red'
    },
    methods: {
      getStyles: function () {
        return {'font-size': this.finalSize + 'px', color: this.finalColor}
      }
    }
  })
</script>

数组语法示例：

<div id="app">
  <h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      baseStyle: {backgroundColor: 'pink'},
      baseStyle1: {fontSize: '40px'}
    }
  })
</script>