一樣的話語不ㄧ樣的口吻說，就會差很多很多好嗎！？

昨天我們利用 Vue.js 的v-系列指令，馬上就做了一個很實用的計數器，有沒感覺 Vue 的好？只要熟悉了這一系列的指令，就可以做出一些實用的功能，真的很方便！

今天我們要介紹的是和「顯示切換」、「屬性綁定」相關的v-show, v-if,v-bind，這就來一一介紹。

v-show 以 CSS 控制顯示

v-show 用來根據表達值的布林值true或false來切換元素的顯示和隱藏。無論v-show的值是什麼，最終都會被解析成布林值，當然，表達式也會解析成布林值。

控制顯示的原理是修改元素 CSS 的 display 屬性，當v-show的值為false時，會自動加上display:none來隱藏元素。反之，true為顯示。而當實例中的數據資料改變之後，對應的元素的狀態也會自動同步更新。

v-if 直接操縱 Dom 元素

v-if和v-show相同，都是根據表達式或布林值被解析成true或false來切換元素的顯示和隱藏。語法可以直接在標籤上給v-if布林值或是表達式，或是依據實例中data所對應的屬性解析得到的布林值來控制。

和v-show的效果雖然相同，但不同的是v-if切換元素的顯示與隱藏的方式，不是操錯元素的 CSS 樣式，而是直接操縱 Dom 元素。表達式的值如果是true，元素就會在 Dom 的樹狀結構中，false則會從 Dom 的樹狀結構中整個移除。

在實際的專案裡，如果元素必須時常切換，建議可以使用v-show來作切換，反之則用v-if。因為v-if是控制 Dom，比較耗效能，所以用v-show會比較省效能些。

先來看一下Codepen的範例

我們希望在點擊按鈕時可以切換顯示或隱藏圖片，因為會頻繁地切換，所以使用v-show，以v-on綁定點擊時觸發得方法changeShow，在實例中的changeShow方法以邏輯運算子!來切換。

或是，我們也可以在v-show上面給表達式做判斷，例如，如果到達 18 歲，才能顯示圖片等等。

HTML 的部分

<div id="app">
  <input type="button" value="switch show" v-on:click="changeShow" /><img
    v-show="isShow"
    src="https://cn.vuejs.org/images/logo.png"
  />
  <hr />
  <p>{{age}}</p>
  <input type="button" value="Add age" v-on:click="addAge" />
  <img v-show="age==18" src="https://cn.vuejs.org/images/logo.png" />
</div>

JavaScript 的部分

const app = new Vue({
  el: '#app',
  data: {
    isShow: false,
    age: 16,
  },
  methods: {
    changeShow: function () {
      this.isShow = !this.isShow;
    },
    addAge: function () {
      this.age++;
    },
  },
});

v-bind 綁定 HTML 標籤裡的屬性

在 HTML 的元素標籤裡，會有許多這個元素的屬性，例如連結的src、圖片文字titre、或樣式的class。我們可以針對每一個屬性來進行綁定，綁定的語法為v-bind:屬性名=表達式。

例如想要綁定一張圖片的連結，可以在圖片標籤的src做綁定，並且屬性值指定是 Vue 實例裡 Data 的屬性對應，如下面範例：

在titre我們也可以拼接內容，或是以三元運算表達式，但建議以「物件」」的方式寫，在實例裡寫邏輯的部分會比較清楚。

v-bind 可以以 : 雙冒號替代

v-bind允許另ㄧ種較簡潔的寫法，以:雙冒號取代v-bind，v-bind:src="imgSrc"可以直接寫成:src="imgSrc"。

HTML 的部分

<style>
.active{ border: 1px solid red; }
</style>

<div id="app">
  <img v-bind:src="imgSrc">
  <img v-bind:titre="imgTitre + '!!' ">
  <!-- 三元表達式的寫法/不建議 -->
  <img :class="isActive?'active':'' " :title="imgTitre" @click="toggleStyle">
  <!-- 以物件的方式寫法 -->
  <img :class="{active:isActive}">
  <input type="button" value="change Style" @click="toggleStyle"/>

</div>

javascript 的部分

const vm = new Vue({
  el: '#app',
  data: {
    msgSrc: 'www.google.com/images/logo.png',
    imgTitre: 'Hello google',
    isActive: false,
  },
  methods: {
    toggleStyle: function () {
      this.isActive = !this.isActive;
    },
  },
});

每日一句法文有益身心：Salut ! --> 沙.旅！ 嗨！或是嘿！熟朋友打招呼用。