iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 8
0
Modern Web

Déjà-vu ? 要 Vue 過才知道系列 第 8

v- 指令 顯示切換和屬性綁定

一樣的話語不ㄧ樣的口吻說,就會差很多很多好嗎!?

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

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

v-show 以 CSS 控制顯示

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

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

v-if 直接操縱 Dom 元素

v-ifv-show相同,都是根據表達式或布林值被解析成truefalse來切換元素的顯示和隱藏。語法可以直接在標籤上給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-bindv-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 ! --> 沙.旅! 嗨!或是嘿!熟朋友打招呼用。


上一篇
Vue.js 簡單實作計數器
下一篇
Vue.js 實作簡易圖片瀏覽
系列文
Déjà-vu ? 要 Vue 過才知道30

尚未有邦友留言

立即登入留言