Day 26：v-if 才做选择，v-show 全都秀

目前的版面配置是基本的瀑布流效果，而此模式较着重在显示书本封面图片，一列只能出现三本书单，RWD 的情况下又会再压缩显示空间，相对在浏览资讯上的速度会较慢，因此延伸出了新的需求：切换检视模式。这个算是相当常见的功能，例如 Google Drive 云端硬碟，一键切换清单检视或格状检视，同时顾及因应不同情境需要切换检视需求的使用者体验。

在处理切换模式之前，我们先做好前置作业，新增一个以表格方式呈现的资料列表。

<div class="booktable">
  <table>
    <thead>
      <tr>
        <th>ISBN</th>
        <th>书名</th>
        <th>原价</th>
        <th>特价</th>
        <th>连结</th>
        <th>图片</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="book in bookList" :key="book.id">
        <td>{{ book.ISBN }}</td>
        <td>{{ book.name }}</td>
        <td>{{ book.originPrice }}</td>
        <td class="bargain">{{ book.sellPrice }}</td>
        <td><a :href="book.link" target="_blank">连结</a></td>
        <td><img :src="book.image" alt="book image" /></td>
      </tr>
    </tbody>
  </table>
</div>

排版样式就因人而异进行处理了，例如可以设置表格固定高度并处理纵向 overflow 问题，同时固定表头位置，就像 Excel 冻结首列的功能。
table

截至目前在 BookList.vue 元件内会同时存在两种检视模式，因此需要再新增切换按钮，我们先简单设置两个 <button>，并在其上监听 click 事件以及检视状态。

预设 isShelf: true，因此一开始会以图表模式呈现，希望达到的效果是当点击「显示表格」的按钮时，会因为变成 isShelf: false 而改为呈现表格模式。

<button class="image_mode" @click="isShelf = true">显示图表</button>
<button class="table_mode" @click="isShelf = false">显示表格</button>

data() {
  return {
    isShelf: true,
  };
},

`v-if`、`v-else`

接下来剩下关键设置，在两种检视模式的资料最外层，加上 v-if、v-else 进行条件式渲染。其判断方式就是当条件为 true 时，才会显示隶属於设定条件层级之内的所有程序码，意即在父层设定条件之後，符合条件的子层内容才会显示在画面上，因此当 v-if 为 true 时，才会显示 v-else 的子层内容。

<div class="bookshelf" v-if="isShelf">
    <!-- 略 -->
</div>

<div class="booktable" v-else>
	<!-- 略 -->
</div>

data() {
  return {
    isShelf: true,
  };
},

了解切换过程之後，可以再进一步将两个按钮合而为一，只需点击同一个按钮就能进行切换检视模式。

`v-if` on <template>

一般在 .vue 单一元件档案内，最外层的 <template> 内只能包含一个根元素，若超过一个元素会报错。（此为 Vue 2 的限制规则，但在 Vue 3 已改为可支援同时存在多个根元素，详见 Fragments 说明版本差异）

<template>
  <h1>BookList</h1>
  <div class="BookList">
</template>

template

<template> 其实还可以作为一个不会被渲染到画面中的包装元素（Conditional Groups with v-if on <template>），只负责处理逻辑判断，并且能在一个 .vue 档案内使用多个 <template>。

因此利用 <template> 的包装特性，再加上条件运算子绑定样式以区分不同检视模式，便能整合按钮功能。

<button
  :class="[isShelf ? 'image_mode' : '']"
  @click="isShelf = !isShelf"
>
  <template v-if="isShelf">显示图表</template>
  <template v-else>显示表格</template>
</button>

image mode
table mode