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

vue if else 用法

在 vue 中 我們可以使用判斷式決定是否要渲染, 這時候 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>