Node JS | Vue3 | Day 7 | v-if 判斷式用法

在 vue3 中 我們可以使用判斷式決定是否要渲染, 這時候 v-if 就很好用了

v-if & v-else

• 先宣告一個 outstanding 的 ref 變數, 並且設定變數值為 true
• create 一個 function 用來修改 outstanding 值
• 在 template 中利用 v-if and v-else 來判斷 要渲染的值
• 透過宣告的 v-on function 來觸發 來看 v-if and v-else 的結果

<script setup>
import { ref } from 'vue'

const outstanding = ref(true)

function toggle() {
  outstanding.value = !outstanding.value
}
</script>

<template>
  <button @click="toggle">toggle</button>
  <h1 v-if="outstanding">Jerry is good!</h1>
  <h1 v-else>Not Good 😢</h1>
</template>