v-bind介绍

v-bind

除了将值插入到模板内容中，我们也需要将一些属性动态绑定。比如动态绑定a元素的href属性或者动态绑定img的src属性，这个时候我们就需要v-bind方法了。

v-bind基础

v-bind用于绑定一个或多个属性值，通过Vue实例中的data绑定元素的src和href，代码如下:

<div id="app">
    <!-- 错误的做法这里不可以适应Mustache语法 -->
    <!-- <img src="{{imgURL}}" alt=""> -->
    <!-- <h2>{{message}}</h2> -->
    <img v-bind:src="imgURL" alt="">
    <a v-bind:href="aHref">百度一下</a>
    <!-- ------------------------->
    <!-- 语法糖写法 -->
    <img :src="imgURL" alt="">
    <a :href="aHref">百度一下</a>
    <!-- 结果一样 -->

  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        imgURL: "https://img30.360buyimg.com/seckillcms/s144x144_jfs/t1/148676/38/19362/141781/5fe168e0E98f292f0/47ae34cfd2278542.jpg!q70.jpg.webp",
        aHref: "http://www.baidu.com"
      }
    })

v-bind动态绑定class

很多时候我们希望动态的切换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>

 <div id="app">
    <!-- <h2 class="active">{{message}}</h2> -->
    <!-- <h2 :class="active">{{message}}</h2> -->
    <!-- --------------------------->
    <!-- <h2 v-bind:class="{类名1:boolean,类名2:boolean}">{{message}}</h2> -->
    <!-- <h2 v-bind:class="{active:true,line:true}">{{message}}</h2> -->
   <h2 v-bind:class="getClasses()">{{message}}</h2>
    <button v-on:click="btnClick">按钮</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        isActive: true,
        isLine: false
      },
      methods: {
        btnClick: function () {
          this.isActive = !this.isActive
        },
        getClasses: function () {
          return { active: this.isActive, line: this.sLine }
        }
      }
    })

• 数组语法(不常用）

<div id="app">
  <h2 class="title" :class="[active,line]">{{message}}</h2>
  <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      active: "aaaa",
      line: "bbbbb"
    },
    methods: {
      getClasses: function () {
        return [this.active, this.line]
      }
    }
  })
</script>

v-bind动态绑定style

我们可以利用v-bind：style来绑定一些CSS内联样式。

• 对象语法

<div id="app">
    <!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> -->
    <!-- 50px要加单引号 不加单引号会把50px当成变量 -->
    <!-- <h2 :style="{fontSize:'50px'}">{{message}}</h2> -->

    <!-- finalSize当成变量使用 -->
    <h2 :style="{fontSize:finalSize+'px',color:finalColor}">{{message}}</h2>

  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        finalSize: 100,
        finalColor: "red"
      }
    })

• 数组语法

<div id="app">
 <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
 <script src="../js/vue.js"></script>
 <script>
   const app = new Vue({
     el: '#app',
     data: {
       message: '你好啊',
       baseStyle: { color: 'red' },
       baseStyle1: { fontSize: '100px' }
     }
   })
 </script>