v-if : 條件判斷

跟我們熟知的 if else-if 和 else 基本意思差不多。

當 v-if為true，小明 飽了 這句話才會出現，反之則會跳到v-else。

  <p v-if="isFull">小明 飽了</p>
  <p v-else>小明 還沒吃飽</p>
  <button type="button" v-on:click="change('isFull')">狀態切換</button>

v-else-if

我們可以透過v-else-if來製作分頁效果。

  <nav class="nav nav-pills nav-fill">
    <a class="nav-link" href="#" v-bind:class="{ 'active': link === '小明' }"
      v-on:click="link = '小明'">小明</a>
    <a class="nav-link" href="#" v-bind:class="{ 'active': link === '小美' }"
      v-on:click="link = '小美'">小美</a>
    <a class="nav-link" href="#" v-bind:class="{ 'active': link === '杰倫' }"
      v-on:click="link = '杰倫'">杰倫</a>
  </nav>
  <div>
    <div v-if="link === '小明'">小明吃早餐</div>
    <div v-else-if="link === '小美'">小美去百貨公司</div>
    <div v-else-if="link === '杰倫'">杰倫去幫助人</div>
  </div>

注意事項：v-for 與 v-if 不能混用

★ 【重要】v-for 與 v-if不建議混用

當 v-for 和 v-if 一起使用時，v-if 具有比v-for更高的優先級。

但當我們有這樣的需求時該怎麼做?

我們可以利用 template 標籤，把兩個語法分開使用。

而 v-if中的內容表示，當 item.price <= 35 ，才會渲染出相應價格的品項。

<ul>
    <template  v-for="(item, key) in products" v-bind:key="item.name">
      <li v-if="item.price <= 35">
        {{ item.name}} / {{ item.price }} 元
      </li>
    </template>
  </ul>

v-if 與 v-show

v-if 與 v-show雖然功能相似，但他們有著 根本性的差異 :
v-if 若為 false，當行code(節點)會處於被 刪除 的狀態
v-show若為 false，當行code(節點)則是被加上 display:none來暫時隱藏。

結論 : v-if按照所寫的條件來決定是否渲染、v-show 則是 display 的 block 或 none；

<p v-show="isFull">小明 飽了</p>
  <button type="button" v-on:click="change('isFull')">狀態切換</button>

JS

const App = {
  data() {
    return {
      name: '小明',
      isFull: true,
      link: '小明',
      products: [
        {
          name: '蛋餅',
          price: 30,
          vegan: false
        },
        {
          name: '飯糰',
          price: 35,
          vegan: false
        },
        {
          name: '小籠包',
          price: 60,
          vegan: false
        },
        {
          name: '蘿蔔糕',
          price: 30,
          vegan: true
        },
      ],
      productsObj: {
        chineseOmelette: {
          name: '蛋餅',
          price: 30,
          vegan: false
        },
        riceBall: {
          name: '飯糰',
          price: 35,
          vegan: false
        },
        soupDumpling: {
          name: '小籠包',
          price: 60,
          vegan: false
        },
        radishCake: {
          name: '蘿蔔糕',
          price: 30,
          vegan: true
        }
      },
    }
  },
  methods: {
    change: function (key) {
      this[key] = !this[key];
    },
  },
};

Vue.createApp(App).mount('#app');