Day 5 - 条件渲染与列表渲染

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