vue3笔记：if语句判断

v-if

依附于某个元素，通过v-if判断真假

<h1 v-if="awesome">Vue is awesome</h1>

v-if v-else

当v-if判断条件为假时，执行v-else

<h1 v-if="awesome">Vue is awesome</h1>
<h1 v-else>Vue is not awesome</h1>

v-if v-else-if … v-else

当v-if为真时显示依附元素内容；当v-if为假，判断v-else-if是否为真；所有都为假时，显示v-else依附元素内容。
整体示例：

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

const awesome = ref(true)

const type = ref('')
const newType = ref('')

//更改type的值
function changeType(){
    type.value = newType.value
}
</script>

<template>
    <button @click="awesome = !awesome">Click me</button>
    <h1 v-if="awesome">Vue is awesome</h1>
    <h1 v-else>Vue is not awesome</h1>

    <input v-model="newType">
    <button @click="changeType">change</button>
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>
</template>```