Vue常用的几个指令附完整案例

下面是讲解Vue常用的几个指令的攻略：

一、v-bind指令

v-bind指令可以动态绑定HTML元素的属性，例如动态指定元素的class、style、src等。其语法格式为v-bind:属性名="属性值"，或者简写为:属性名="属性值"。

示例一：

假设我们有一个用户名字的数据变量，需要将它实时地绑定到HTML元素的title属性里面，可以这样使用v-bind指令：

<template>
  <div>
    <h1 v-bind:title="username">Hello World!</h1>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      username: "Alice"
    };
  }
};
</script>

在上述代码中，我们使用了v-bind指令将username变量动态地绑定到h1标签的title属性里，title属性的值就会变成Alice。

示例二：

假设我们有一个计算属性，需要根据条件动态地为HTML元素绑定class属性，可以这样使用v-bind指令：

<template>
  <div>
    <h1 v-bind:class="{ active: isActived }">Vue Directive</h1>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      isActived: true
    };
  },
  computed: {
    activeClass: function() {
      return {
        'active': this.isActived
      }
    }
  }
};
</script>

在上述代码中，我们使用了v-bind指令将isActived变量动态地绑定到h1标签的class属性里，当isActived为true时，h1标签的class属性就会增加一个名为active的class样式。

二、v-if指令

v-if指令可以根据表达式的真假情况动态地切换HTML元素的显示或隐藏。当表达式为true时，该元素显示；否则隐藏。

示例一：

假设我们需要根据条件动态地显示或隐藏一些HTML元素，可以使用v-if指令：

<template>
  <div>
    <button v-on:click="showOrHide = !showOrHide">
      {{ showOrHide ? "Hide" : "Show" }}
    </button>
    <p v-if="showOrHide">Hello World!</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      showOrHide: true
    };
  }
};
</script>

在上述代码中，我们使用了v-if指令，当showOrHide变量为true时，p标签会显示出来；当showOrHide变量为false时，p标签会被隐藏起来。

示例二：

假设我们有一个数组，需要将里面的奇数和偶数分别展示出来，可以使用v-if指令：

<template>
  <div>
    <ul>
      <li v-for="item in numbers" :key="item">
        <span v-if="item % 2 === 0">偶数：{{ item }}</span>
        <span v-else>奇数：{{ item }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      numbers: [1, 2, 3, 4, 5, 6]
    };
  }
};
</script>

在上述代码中，我们使用了v-for指令遍历数组中的每个元素，然后根据元素是否为偶数，动态地切换展示样式。