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

---

v-bind指令主要用于响应式的更新html属性

一般我们要想在元素节点的属性上绑定vue的data数据

是不可以直接使用{{ }}插入值语法来使用

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

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

所以如果我们想让dom属性节点与data数据绑定响应

就需要使用 v-bind 指令

---

v-bind

v-bind具体用法如下

<h1 v-bind:title="tit">this is test</h1>

很明显可以看出使用了v-bind后指定某个属性名，那么在这个属性

的属性值当中我们就可以使用data数据进行绑定了

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

---

v-bind语法糖

v-bind: 简写为 :

具体代码实现

<h1 :title="tit">this is test</h1>

---

v-bind指令的一些注意事项

不能在属性值内直接写入以下语法

<h1 :style="font-size:50px;color:red;">this is test</h1>

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

解决方式如下

<h1 :style="'font-size:50px;color:red;'">this is test</h1>

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

---

使用数组方式来使用v-bind

<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我们留到后面！

---

使用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这个指令就是这么个回事了！