详解 Vue 的 v-bind 指令

Vue中的 v-bind 指令基本用法和介绍：

1. 使用字符串来绑定数据

v-bind指令主要用于响应式的更新html属性，一般我们要想在元素节点的属性上绑定vue的data数据，是不可以直接使用{{ }}插入值语法来使用

<h1 title="{{tit}}">Hello World</h1>

<!-- 
    以下假设是我们定义的data对象
    拥有一个data数据tit 如果我们使用插值的形式
    那么实际页面提示的title信息是{{tit}} 而不是this is title
-->
  data() {
    return {
      tit:"这是一个标题"
    };
  }, 

所以如果我们想让dom属性节点与data数据绑定响应，就需要使用 v-bind 指令这样操作：

<h1 v-bind:title="tit">这是一个标题</h1>

很明显可以看出使用了v-bind 后指定某个属性名，那么在这个属性的属性值当中我们就可以使用data数据进行绑定了

注意：这时我们是不需要用{{ }}插值操作的

v-bind: 还可以简写哦，可以省略 v-bind，直接使用冒号来处理 ????

<h1 :title="tit">这是一个标题</h1>

注意：不能在属性值内直接写入以下语法哦????

<h1 :style="font-size:50px;color:red;">这是一个标题</h1>

这是错误的，因为vue会把font-size当成一个data数据鸭～

解决方式如下：

<h1 :style="'font-size:50px;color:red;'">这是一个标题</h1>

可以看到只需要在总的样式前后各加上一个 ’ 单引号即可！这样他就会把他当作字符串了，不过如果我们这么加样式就没有必要写v-bind了…

2. 使用数组方式来绑定数据

<h1 :style="['font-size:30px','color:red']">这是一个标题</h1>

<!-- 注意这里的fontSize和fontColor是我们假定我们在data数据中定义好的一些数据-->
<h1 :style="[fontSize,fontColor]">这是一个标题</h1>

<!-- 原始的那个属性和绑定了的属性是可以并存的 存在相同的属性会覆盖前者 -->
<h1 style="font-size:30px;" :style="[fontColor]">这是一个标题</h1>

使用v-bind来处理更改元素的class属性：

<!-- 这里假设我们在style中定义了两个类fontSize和fontColor -->
<style>
.fontSize{
  font-size:30px;
}
.fontColor{
  color:red;
}
</style>

<!-- 然后又假设我们定义了这些data数据 -->
data(){
  return {
    fontSize:"fontSize",
    fontColor:"fontColor",
  }
}

然后我们如果要在 :class 中使用这些类可以有以下方式：

  1. 使用data数据更新类 如果直接这么去用实际上会找data数据中的fontSize

<h1 :class="fontSize">这是测试数据</h1>

  2. 直接使用单引号括起来后直接使用class类 不经过data数据 不过这样就没有使用v-bind的意义哦????

<h1 :class="'fontSize'">这是测试数据</h1>

  3.使用数组形式在data数据加上class类

<h1 :class="[fontSize,fontColor]"></h1>

  4.使用对象形式来加上class类

<!-- 这里是我们定义的vue中的data数据 -->
data(){
  return {
    fontSize:"fontSize",
    fontColor:"fontColor",
    isSize:true,
    isColor:false,
  }
}
<h1 :class="{fontSize:isSize,fontColor:isColor}">这是标题</h1>

最重要的是第4种方式，使用对象形式操作v-bind：

第4种方式的fontSize是data数据，而isSize也是data数据，而fontSize的属性值要求是一个布尔值，所以isSize这个data数据是个布尔值，isSize他决定fontSize这个属性是否会启用，如果isSize是true，那么fontSize则会使用他自己data数据里的值作为class名，如果isSize是false，那么fontSize则不会使用他自己data数据里的值作为class名，但是这样做虽然很好但是不简便，于是我们可以用结构赋值！

第4种方式可以通过ES6语法中的结构赋值来简写：

<!-- 假设我们这样定义了data数据 -->
data(){
  return {
    fontSize:true,
    fontColor:true,
  }
}
<!-- 假设我们定义了这些类 -->
<style>
.fontSize{
  font-size:30px;
}
.fontColor{
  color:red;
}
</style>

<!-- ES6结构赋值语法 -->
<h1 :class={fontSize,fontColor}>这个是测试数据</h1>

那么我们只需要在data中的fontSize或者fontColor中更改布尔值即可达成启用某个class或者关闭某个class了！当然这种解构语法需要class类名和我们data数据定义的属性名是一致的！

最后我们可以还可以使用方法来一次性添加多个类，无需手动添加了：

<!-- 同样的假设我们定义了以下这些 -->
<!-- 假设我们这样定义了data数据 -->
data(){
  return {
    fontSize:true,
    fontColor:true,
  }
}
<!-- 假设我们这样定义了methods方法 -->
methods:{
  getStyle(){
    return {this.fontSize,this.fontColor};
  },
}
<!-- 假设我们定义了这些类 -->
<style>
.fontSize{
  font-size:30px;
}
.fontColor{
  color:red;
}
</style>

<!-- 那么我们可以这样去添加这些类 -->
<h1 :class="getStyle()"></h1>

v-bind这个指令差不多就是这些操作了