vue---- v-bind指令

v-bind指令用于给html标签设置属性。

基本用法

<div id="app">
  <div v-bind:id="id1">文字</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    id1: 'myid'
  }
})
</script>

这样得到<div id="myid">文字</div>

class 属性绑定

同时传入一个或多个类：

<div id="app">
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>

<div v-bind:class="{active: isActive}">文字</div>这种写法的意思是，如果isActive为true，则有active类，如果为false，则没有active类。

<div id="app">
  <div v-bind:class="{active: isActive}">文字</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

如果同时多个类都要判断，则可写成<div v-bind:class="{active: isActive, highlight: isHighlight}">文字</div>。

还可以直接绑定数据里的一个对象：<div v-bind:class="classObject"></div>，其中classObject是data对象的一个子对象，名称可任意。

而且还可以绑定computed里的属性，毕竟data的数据是静态的，computed的属性可以计算：

<div id="app">
  <div v-bind:class="classObject">文字</div>
</div>

<script>
new Vue({
  el: '#app',
  computed: {
    classObject: function () {
      // 计算过程省略，假设得出了isActive和isDanger的布尔值
      return {
        'active': isActive,
        'text-danger': isDanger
      }
    }
  }
})
</script>

style 属性绑定

跟class属性绑定是一样的道理。

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
    fontSize: 30
  }
})
</script>

配合v-model实现数据绑定

数据绑定的含义这里先不细说，就先理解为：各种代码之间有数据关联，牵一发而动全身就行了。

<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="cssa" id="r1">
  <br><br>
  <div v-bind:class="{'class1': cssa}">
    文字
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      cssa: false
  }
});
</script>

解释：

v-model="cssa"指令有2个作用，一个作用是设定<input>的初始值，也就是到底打不打勾，另一个作用是切换cssa的状态，也就是说当<input>值为false时，cssa的值也是false，当<input>值为true时，cssa的值也是true。

然后，v-bind:class="{'class1': cssa}"意味着，立即生成一个类似于<div class="">文字</div>或者<div class="class1">文字</div>的标签，具体生成哪个，由cssa的值决定。

最后，

  data:{
      cssa: false
  }

定义了cssa的初始值，就是false。它影响两者，一个是影响<input>，另一个是影响<div>。假设cssa的初始值设成true，那么，<input>会默认打钩，<div>的class也会有值class1。

注意：v-bind:冒号后面是一个赋值表达式，不要理解为html代码，也就是说v-bind:class="{'class1': cssa}"表示这个div的属性为class，值由cssa决定，尤其是“class”字符，虽然通常情况下它就是属性名，但是不要直接理解为vue在拼接html代码。

属性值拼接

<div id="app">
  <div v-bind:id="'list-' + id">文字</div>
</div>
  
<script>
new Vue({
  el: '#app',
  data: {
    id : 1
  }
})
</script>

得到<div id="list-1">文字</div>。

从v-bind:id="'list-' + id"可以看到，id="'list-' + id"确实是表达式，只有'list-'是真正的字符串。

配合过滤器实现数据加工

过滤器，其实就是作用在传递的数据上的函数。

<div id="app">
  <a v-bind:href='url | add_protocol'>文字</a>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'microkof.com'
  },
  filters: {
    add_protocol: function (value) {
      if (!value) {
        return '';
      } else {
        return 'https://' + value;
      }
    }
  }
})
</script>

比如说，我想给<a>附上href属性，不过恰好有一个问题是href的值没有协议（https://），所以我想给它加上协议，那么就定义一个过滤器（filters），过滤器的名字叫add_protocol，值是一个函数。

v-bind 缩写

v-bind由于太常用，可以缩写。缩写方式是：直接不写，从冒号开始写。

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

 

 

链接：https://www.jianshu.com/p/019b868c0279