v-if 條件渲染

Vue 之中還有一個相當實用的功能就是條件渲染了，條件渲染類似於使用 if else 控制狀況，只是現在是控制什麼樣的狀況下進行 DOM 的渲染。

如下面程式碼所示，我們為div設定條件渲染，當 isShow 變數為 true 時才進行渲染，false 時則否。

當我們把isShow從 true 改為 false 之後可以發現瀏覽器上的"我是 v if 文字就消失了"。

<template>
    <div v-if="isShow">我是 v if</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isShow: true
    };
  },
</script>

除了v-if外，我們也可以搭配 v-else 指定剩下的狀況。

這時候如果把 isShow 改成 false，就會發現印出了"我是 v if false"。

v-for 列表渲染

在Vue中，也提供了方法讓我們可以遍歷物件，並顯示在頁面上。

而v-for 用法如下:

我們在Data中宣告了一個用來存放使用者名字及年齡的陣列，並透過v-for遍歷這個物件。

使用v-for迭代物件中的元素。第一個參數是用來存放資料內容的物件，第二個參數 key 是鍵值，第三個參數 index 是索引值，第二個參數和第三個參數皆為 optional。

此外，可透過 :key="index" 取得該筆資料的唯一值，避免資料渲染時有錯誤產生。

<template>
  <div id="app">
    <li v-for="(item, index) in nameArray" :key="index">
      name:{{ item.name }}, age:{{ item.age }}
    </li>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      nameArray: [
        { name: "Grant", age: 26 },
        { name: "Amy", age: 28 },
        { name: "Linda", age: 30 },
      ],
    };
  },
};
</script>

成果如下:

我們也可以將v-for搭配其他的DOM元素，如table。

<template>
  <div id="app">
    <table>
      <th>name</th>
      <th>age</th>
      <tr v-for="(item, index) in nameArray" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </table>
  </div>

以上就是條件渲染與列表渲染的用法~

可透過以下網址獲取demo code:

https://codesandbox.io/s/quirky-mirzakhani-imtby?file=/src/App.vue

Hi, I am Grant.

個人部落格 - https://grantliblog.wordpress.com/
個人網站 - https://grantli-website.netlify.app/#/mainpage
我的寫作專題 - https://vocus.cc/user/5af2e9b5fd89780001822db4#