今日為各位帶來的是條件判斷：v-if 、v-show 還有 v-for 的介紹呦

條件判斷：v-if、v-show

v-if 與 v-show 的用法其實大同小異，來看看程式碼：

<template>
  <label>
    <input type="checkbox" v-model="iThome_isShow" /> 
    isShow: {{ iThome_isShow }}
  </label>
  <div v-if="iThome_isShow">V-if</div>
  <div v-show="iThome_isShow">V-show</div>
</template>

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

接下來看看網頁的表現：

看起來是不是一模一樣，但其實還是有差異的，接下來就分別來看看吧！

v-show

v-show 的用法十分簡單，當值為truthy時會顯示，而為 falsy 時會隱藏。

我們可以透過檢視網頁程式碼中去觀察
CSS 中的 display: none 是將我們的區塊隱藏起來了，而不是刪除。

v-if

v-if 與 v-show 的邏輯雷同，都是透過控制元素去決定是否出現在畫面上。而 v-if 也可以與 v-else-if 與 v-else 來做不同的搭配：

<template>
  <div id="app">
    <h4>count: {{ count }}</h4>
    <button @click="count++">Plus</button>
    <button @click="count = 0">Reset</button>

    <div style="margin-top: 20px">
      <div
        v-if="count === 0"
        style="background-color: #f00; width: 100px; height: 100px"
      >
        Block A
      </div>
      <div
        v-else-if="count < 5"
        style="background-color: green; width: 100px; height: 100px"
      >
        Block B
      </div>
      <div v-else style="background-color: #00f; width: 100px; height: 100px">
        Block C
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
};
</script>

由以上的程式碼可以得知：
我們可以透過 v-if、v-else-if 與 v-else 去控制顏色的變化。

v-for

v-for 是一個可以用來列表渲染的指令，可以將「陣列」或「物件」類型的資料重複並呈現在網頁上。

<template>
  <div id="app">
    <ul>
      <li v-for="example in iThome" :key="example">{{ example }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iThome: ["008", "JS", "is", "awesome"],
    };
  },
};
</script>

我們可以使用 item in items 的指令去做使用，而 item 的命名可隨意更改，只要是符合 JavaScript 的變數名稱即可。
而網頁就會幫我們將所有的物件已表格的方式呈現出來：

而我們也可以在 v-for 中加入索引值 index：

<template>
  <div id="app">
    <ul>
     <li v-for="(item, index) in arr" :key="item(index)">{{ item }}</li>
    </ul>
  </div>
</template>

將模板中的程式碼改成這樣後，我們的網頁就會呈現：

而 v-for 除了用陣列以外，也能使用物件：

<template>
  <div id="app">
    <ul>
      <li v-for="example in iThome" :key="example">{{ example }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iThome: {
        title: "08js",
        author: "Kuro",
        publishedAt: "2019/09",
      },
    };
  },
};
</script>

網頁呈現：

好啦，那我們今天對於 v-show、v-if 與 v-for 的介紹就到這裡告一段落囉
那我們明天見囉！