4.3.1 了解 v-bind 指令

指令（Directive）是特殊的带有“v-”前缀的命令，其作用是当表达式的值改变时，将某些行为应用到 DOM 上。举一个简单的例子，单击某一个按钮，会显示 div，再次单击 div 隐藏，这里就可以通过设置属性的真假，将指令作用到 div 上来控制显示或隐藏。

为什么要使用指令呢？最重要的原因是使用指令可以简化操作，可以更加方便地完成一些业务代码。例如之前传统开发中的条件判断，一定要写到 JavaScript 中才能完成，但是现在使用指令就可以完成。

Vue.js 指令的书写位置可以是在任意 HTML 元素的开始标签内，可以写入多个指令，多个指令间使用空格分隔。例如给 a 标签添加两个指令，分别为 v-bind 指令和 v-on 指令。

<a href="#" v-bind:class="{ active:timeflag }" v-on:click=" queryAll('time')">全部</a>

v-bind 指令的主要用法是动态更新 HTML 元素上的属性。通过代码看一下 v-bind 指令的使用，在 components 文件夹下新建 Directive.vue 组件，写入如示例 6 所示代码，并在路由 index.js 中进行配置。

示例 6

<template>
   <div>
       <a v-bind:href="url">链接</a>
       <!-- v-bind 可以省略，缩写为 -->
       <br>
       <a :href="url">链接</a>
   </div>
</template>

<script>
export default {
   name: 'APP',
   data() {
      return {
          url: 'www.baidu.com'
      }
   }
}
</script>

<style scoped>
</style>

在浏览器中运行，显示效果如下图所示。

链接的 href 属性被动态地设置了，当数据变化的时候，就会重新渲染。

在动态的数据绑定中，最常见的两个需求是元素的样式名称 class 和内联样式 style 的动态绑定，它们也是 HTML 的属性 ，因此可以使用 v-bind 指令。

标签：HTML,4.3,bind,指令,使用,div,属性
来源： https://www.cnblogs.com/Huang-zihan/p/16387678.html