[Day30] Vue3 - 条件判断

在没有框架前，条件判断都是写在 Javascript 里面，但是有了 Vue 之後，可以直接在 HTML 需要判断的 tag 中写入判断式，大幅减少程序码量。

Vue 范例程序码

同样先附上今天练习内容会写到 Vue 部分的程序码

const vm = Vue.createApp({
  data: () => {
    return {
      showContent: true,
      num: 0,
      nameList: ['Alex', 'Brenda', 'Carter', 'David'],
      articles: {
          name: '30days challenge',
          usedTime: 'infinite',
          date: '2021/10/08'
      }
    }
  },
}).mount('#app');

隐藏画面元素 v-show

v-show 搭配布林值（或是 truthy or falsy）来决定要不要显示该元素，不显示时会加上display: none;的样式。

<div id="app">
  <input type="checkbox" v-model="showContent">
  <p v-show="showContent">True</p>
  <p v-show="!showContent">False</p>
  <p>{{ showContent }}</p>
</div>

上面的范例搭配 checkbox 来切换显示的项目。

条件判断 v-if／v-else-if/v-else

v-if 系列的用法可以直接在 HTML 写条件是判断，不需要在 HTML 和 JS 档案间切换来看有没有操作到对的 DOM 了。

<div id="app">
  <p v-if="num===2">First</p>
  <p v-else-if="num===1">Second</p>
  <p v-else>Third</p>
</div>

上面的范例程序执行完，只会显示 Third ，其他两个 p 标签不符合条件不会加到 HTML 内。

回圈 v-for

在制作选单、商品列表等画面时就会使用回圈来连续产出标签，在 JS 中组字串常常组错，现在有样板字串方便很多，但是结合在 HTML 内撰写更直觉。

1. 撰写格式是item in 阵列名称，item 的名称可以自行变更。

   <div id="app">
     <ul>
       <li v-for="name in nameList">{{name}}</li>
     </ul>
   </div>
   

2. 也可以加入索引值来使用，名称可以不是 index，但是尽量以能辨识为主

   <div id="app">
     <ul>
       <li v-for="(name, index) in nameList">{{index + 1}} - {{name}}</li>
     </ul>
   </div>
   

3. 索引值可以搭配 v-show 或 v-if 来产制不同的样式

   <div id="app">
     <ul>
       <li v-for="(name, index) in nameList" v-show="index == 1">{{index + 1}} - {{name}}</li>
     </ul>
   </div>
   

4. 搭配物件使用，把物件内的值都列出来

   <div id="app">
    <ul>
      <li v-for="item in articles">{{item}}</li>
    </ul>
   </div>