前端学习-vue学习005-条件渲染

使用教程

使用 v-if , v-else 指令来有条件地渲染元素：
如下例，当 awesome 值为真值 (Truthy) 时渲染第一个 h1 ，否则渲染第二个 h1

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

实现使用按钮切换两个 h1 标签

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

const awesome = ref(true)

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

<template>
  <button @click="toggle">toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>