iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 4
0
Modern Web

30天手把手的vue.js教學!系列 第 4

2020it邦鐵人賽-30天手把手的Vue.js教學 Day4-認識vue directives(中) v-if & v-for

tags: Vue.js ItIron2020

前言

上一篇文章我們介紹了什麼是vue directives以及v-bind & v-on這兩個實用的小幫手,今天我們的文章就來介紹幾個用在渲染(render)方vue directives面的directives吧! 別擔心,今天的內容較少、也較簡單,等介紹完所有的directives後就可以打造個小專案讓你熱熱手:D

條件渲染 v-if & v-show

在vue中有兩種常用的條件渲染方式,所謂的條件渲染,簡單說就是若某種情況,我就要render某些元素出來。比方說使用者登入後,右上角要出現登出按鈕、使用者沒有輸入有效內容前、提交按鈕不會出現都是很常見的例子。所以我們可以用data內的一些自訂屬性來控制template中某些元素該不該出現。
我們很快的看一下一個簡單的範例吧! Demo
if懶得點進去就看下方的文字唄~!

<template>
  <div id="app">
    <p v-if="isLogin">我有登入!</p>
    <p v-show="isAdmin">我是管理員</p>
    <button @click="isAdmin = !isAdmin">點我切換管理員身分</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAdmin: false,
      isLogin: true
    };
   }
 }
</script>

在上方的範例中,一開始isAdmin的值為false,所以我是管理員這句話一開始看不到,但如果我們透過按鈕將isAdmin的值改為true的時候,那段話就神奇的pop出來了!

v-show vs. v-if

上方的簡單範例也許有讓你了解他們的基本使用,但同時你可能會困惑兩者到底有什麼差異,不都是條件渲染嗎? 沒錯,他們都是條件渲染,網路上已經有很多文章介紹兩者的差異,我這邊就做簡單的整理。

  • v-show 因為是單純控制css display屬性決定要不要出現,效能表現會比較好一點。
  • v-if可以用在template(子元件的顯示上) v-show無法。
  • v-if可以搭配v-else-if、v-else等directives使用。
<template>
  <div id="app">
    <p v-if="isLogin">我有登入!</p>
    <p v-else>我沒登入喔喔喔喔喔!</p>
  </div>
</template>

特別注意一下v-else一定要緊接在v-if的元件後面,不然vue就會很無情地跟你噴錯喔?
像是下方的範例就會噴給你看!

<template>
  <div id="app">
    <p v-if="isLogin">我有登入!</p>
    <h1>Hello 你好嗎~衷心感謝~!</h1>
    <p v-else>我沒登入喔喔喔喔喔!</p>
  </div>
</template>

大部分情況你都可以用v-if達到你想要的效果,不過若你預期該元件會頻繁被切換顯示與否,那這種情況用v-show就會更為恰當!

利用v-for輕鬆的渲染複數的元件

接著要介紹的是相當實用的v-for指令,v-for指令可以利用你存放在data屬性內的值做元件渲染,聽不懂對吧! 馬上來看一下例子吧!

<template>
  <div id="app">
    <h1>V-for demo</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{todo}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: ["Learn vue","Buy diner", "Make a todo list"]
    };
  }
};

上方的範例會是這樣的結果,會直接render出三個li元素!你也可以進這隻pen自己玩玩看!

v-for demo

從上方的範例你可以看出v-for的基本用法,有兩個基本的重點

  • v-for="item in items" 前方的變數你可以自由命名,後方則是你存在data屬性中的陣列/物件
  • 每個v-for使用時,務必要利用v-bind綁定key值,否則vue會提出警告,key值的目的在於要清楚的分辨每一個v-for render出來的元素。

當然你也可以在v-for中導入index值

<template>
  <div id="app">
    <h1>V-for demo</h1>
    <ul>
      <li v-for="(todo,index) in todos" :key="todo.id">{{index}}: {{todo}}</li>
    </ul>
  </div>
</template>

v-for接受的第二個參數預設為index,自然也可以照你所希望的命名,但會建議盡量用index、i這類比較常見的命名慣例!


用在物件上也是完全沒有問題的! 接收的參數分別是value、key以及index

<!--     for object -->
<ul>
    <li v-for="(value,key,index) in person">
      {{key}} : {{value}}
    </li>
</ul>
        
person: {
    name:'Danny',
    age: 29,
    gender: 'male'
}

結語

今天的內容相當簡單、卻也相當實用,v-if、v-show & v-for幾乎是所有專案中都必不可少的指令,當然在使用上時也有一些細節是需要注意,免得造成預期外的錯誤,像是一定要綁key、盡量不要v-if & v-for掛在同一個元件等,但善用的話不但能輕易做出想要的效果,程式碼也會相當的簡潔! 明天我們會繼續講剩下的directives,結束之後就會進入我們期待已久的小型專案實作囉:D ! 我們明天見~!

此文章同步發布於個人部落格,有興趣的大大也可以來參觀一下:D


上一篇
# 2020it邦鐵人賽-30天手把手的Vue.js教學 Day3-認識vue directives(上)
下一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day5-認識vue directives(下) v-model & custom directives
系列文
30天手把手的vue.js教學!30

尚未有邦友留言

立即登入留言