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的基本用法，有兩個基本的重點

• 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