指令是Vue模板中最常用的一項功能，前綴v-。指令的主要職責就是當其表達式的值改變時，相應的將某些行為應用到DOM上。

v-if

用來判斷元素是否插入，為true的時候元素會被插入，為false的時候元素擇會被移除。

示例代碼( isShow = true )

<template>
  <div id="app">
   {{date|formatDate}}
   <span v-if="isShow">{{msg}}</span>
  </div>
</template>

<script>
import Util from "./utils/util.js";
export default {
  name: "app",
  data() {
    return {
      date: new Date(),
      msg:"Hello world!",
      isShow:true
    };
  },

  filters: {
    formatDate: function(date) {
      return `${date.getFullYear()}-${Util.format(
        date.getMonth() + 1
      )}-${Util.format(date.getDate())} ${Util.format(
        date.getHours()
      )}:${Util.format(date.getMinutes())}:${Util.format(date.getSeconds())}`;
    }
  }
};
</script>

結(jié)果：( isShow = true )

image.png

示例代碼( isShow = false )

<template>
  <div id="app">
   {{date|formatDate}}
   <span v-if="isShow">{{msg}}</span>
  </div>
</template>

<script>
import Util from "./utils/util.js";
export default {
  name: "app",
  data() {
    return {
      date: new Date(),
      msg:"Hello world!",
      isShow:false
    };
  },

  filters: {
    formatDate: function(date) {
      return `${date.getFullYear()}-${Util.format(
        date.getMonth() + 1
      )}-${Util.format(date.getDate())} ${Util.format(
        date.getHours()
      )}:${Util.format(date.getMinutes())}:${Util.format(date.getSeconds())}`;
    }
  }
};
</script>

結(jié)果：( isShow = false )

image.png

v-bind

用來動態(tài)更新HTML元素上的屬性
縮寫：

<a v-bind:href="url">百度一下</a>
<!-- 縮寫為 -->
<a :href="url">百度一下</a>

實例代碼

<template>
  <div id="app">
   {{date|formatDate}}
   <span v-if="isShow">{{msg}}</span>
   <p><a v-bind:href="url">百度一下</a></p>
  </div>
</template>

<script>
import Util from "./utils/util.js";
export default {
  name: "app",
  data() {
    return {
      date: new Date(),
      msg:"Hello world!",
      isShow:false,
      url:'https://www.baidu.com'
    };
  },

  filters: {
    formatDate: function(date) {
      return `${date.getFullYear()}-${Util.format(
        date.getMonth() + 1
      )}-${Util.format(date.getDate())} ${Util.format(
        date.getHours()
      )}:${Util.format(date.getMinutes())}:${Util.format(date.getSeconds())}`;
    }
  }
};
</script>

v-on

用來綁定事件監(jiān)聽器，這樣我們就可以做一些交互。
縮寫@

<button v-on:click="handleShow">{{btnTitle}}</button>
<!-- 縮寫為 -->
<button @click="handleShow">{{btnTitle}}</button>

示例代碼

template>
  <div id="app">
   {{date|formatDate}}
   <span v-if="isShow">{{msg}}</span>
   <p><a v-bind:href="url">百度一下</a></p>
   <button v-on:click="handleShow">{{btnTitle}}</button>
  </div>
</template>

<script>
import Util from "./utils/util.js";
export default {
  name: "app",
  data() {
    return {
      date: new Date(),
      msg: "Hello world!",
      isShow: false,
      url: "https://www.baidu.com",
      btnTitle: "顯示"
    };
  },
  methods: {
    handleShow: function() {
      this.isShow = !this.isShow;
      if (this.isShow) {
        this.btnTitle = "隱藏";
      } else {
        this.btnTitle = "顯示";
      }
    }
  },
  filters: {
    formatDate: function(date) {
      return `${date.getFullYear()}-${Util.format(
        date.getMonth() + 1
      )}-${Util.format(date.getDate())} ${Util.format(
        date.getHours()
      )}:${Util.format(date.getMinutes())}:${Util.format(date.getSeconds())}`;
    }
  }
};
</script>