指令是Vue模板中最常用的一項(xiàng)功能吱涉，前綴v-潘鲫。指令的主要職責(zé)就是當(dāng)其表達(dá)式的值改變時(shí)震糖，相應(yīng)的將某些行為應(yīng)用到DOM上女揭。

v-if

用來(lái)判斷元素是否插入蚤假，為true的時(shí)候元素會(huì)被插入，為false的時(shí)候元素?fù)駮?huì)被移除吧兔。

示例代碼( 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

用來(lái)動(dòng)態(tài)更新HTML元素上的屬性
縮寫(xiě)：

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

實(shí)例代碼

<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

用來(lái)綁定事件監(jiān)聽(tīng)器磷仰，這樣我們就可以做一些交互。
縮寫(xiě)@

<button v-on:click="handleShow">{{btnTitle}}</button>
<!-- 縮寫(xiě)為 -->
<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>