class2_v-bind数据绑定

[TOC]

class1介绍的指令都是在标签内容区域进行数据的展示，现在需要给标签属性来绑定数据，如href/src等属性要动态变化时

v-bind介绍

作用：动态绑定属性
缩写：
传入：任意的属性/对象

v-bind基本使用

需要给动态变化的属性（如这里的src）前面加上一个 v-bind: ，这样的话，引号里面的内容才会被Vue解析成变量，去data中寻找对应的值是什么
Vue给我们提供了一个语法糖:可以省略v-bind，直接使用一个 : 就可以了 ```html


<a name="HWYZm"></a>
## v-bind动态绑定class（对象语法）

- 我们会遇到这种情况：当点击一个元素时，给他添加一个class类，当点击其兄弟元素时，让该元素移除这个类，新元素添加这个类
- 我们之前的做法，就是用jQuery来做，比如：$().addClass().siblings().removeClass()....这种做法来做，现在Vue有更加简单的方法
- <h2 :class="{类名1: Boolean, 类名2: Boolean}"></h2> 这种就是Vue中的办法，当我们Boolean为True时，改类就会添加到改元素上，否则就不会添加上
- 简单来说：就是使用对象的方式来传递参数，里面是一个个键值对，键名就是类名，值就是Boolean值，来控制这个类是否给这个元素添加
```html
<div id="app">
    <h2 :class="{active: true, line: false}">{{message}}</h2> <!--这时，h2元素就只有一个active类，而没有line类-->
  <h2 :class="{active: isActive, line: isLine}">{{message}}</h2>
  <button v-on:click="btnClick"></button> <!--这时点击该按钮就会让isActive这个类加或者不加-->
</div>
<script>
    const app = new Vue({
      el: '#app',
    data: {
        message: 'hello',
      isActive: true,
      isLine: true,
    },
    methods: {
        btnClick: function() {
          this.isActive = !this.isActive;
      }
    }
  })
</script>

这时候就可以在浏览器的控制台中进行控制，当我们把isActive的值改为false时，h2中就去掉了active这个类：app.isActive = false
而且，使用了 :class=”{key: value, key: value}” 这种方式后，还可以使用普通的 class=”title” 这种方法来添加类，他会帮我们将所有的class进行合并的，不会覆盖掉！
所以以后开发时，如果是必须要有的类，我们就使用 class=”title” 这种方式来进行添加，而一些可能会添加或者删除的类则用 :class=”{}” 这种方式来添加

有时候，可能会觉得这个对象太长了，我们也可以放在一个methods或者计算属性computed中

<div id="app">
  <h2 class="title" :class="getClass()">{{message}}</h2>
</div>
<script>
  const app = new Vue({
    el: 'app',
  data: {
      message: 'hello',
    isActive: true,
    isLine: true
  },
  methods: {
      getClass: function() {
        return {active: this.isActive, line: this.isLine}
    }
  }
})
</script>

v-bind动态绑定class（数组语法）

当一个元素的类非常多的话，就可以将其放在数组中进行展示

这种用的不多，因为不能绑定

<div>
  <h2 class="title" :class="['active', 'line']">{{message}}</h2>
</div>

v-bind动态绑定style（对象语法）

在组件化开发中，一个组件在不同的地方展示的样式可能是不一样的，所以我们就会用到定制，也就是给不同的元素绑定不同的样式，所以要动态绑定style
其实就是绑定行内样式，用法：
{{message}}
这里的属性值要加上引号，不然Vue会当成变量来解析
多数情况下这里的css属性值就是使用的变量形式的

注意，变量的值可以写 30px ，也可以直接写成数字，然后在对象中做一个拼接，如width: finalWidth+’px’，这里其实是做了一个隐式转换，数字和字符串相加会将数字先转为字符串再拼接

<div id="app">
  <h2 :style="{fontSize: finalSize, width: finalWidth+'px'}">{{message}}</h2>
</div>
<script>
  const app = new Vue({
    el: '#app',
  data: {
      message: 'hello',
    finalSize: 30px,
    finalWidth: 100
  }
})
</script>

同理，如果这个对象太长的话，我们也可以使用如上的方法，将其写作一个方法，放在methods中

v-bind动态绑定style（数组语法）

这里为什么可以使用数组呢？

<div id="app">
 <h2 :style="[baseStyle1, baseStyle2, baseStyle3]">{{message}}</h2>
</div>
<script>
 const app = new Vue({
   el: '#app',
 data: {
     message: 'hello',
   baseStyle1: {backgroundColor: 'red'},
   baseStyle2: {fontSize: '30px'},
   baseStyle3: {color: '#eee'}
 }
})
</script>

v-bind介绍

v-bind基本使用

v-bind动态绑定class（数组语法）

v-bind动态绑定style（对象语法）

{{message}}

v-bind动态绑定style（数组语法）