vue3 v-if

 v-if 適用於切換

eg:組件之間的切換

兩個子組件

父組件 app.vue

子組件  first.vue

子組件second.vue

 

父組件中：

<template>

　　<button @click="isResourceFirst  = !isResourceFirst ">切換</button>

　　<first v-if="isResourceFirst "></first>

　　<second v-else></second>

</template>

<script>

import{ref} form "vue"

import first from "first.vue的路徑"

import second from "second的路徑"

export default{

　　components:{

　　　　first,second

　　},setup(){

　　　　const isResourceFirst = ref(ture);

　　　　return(sResourceFirst)

　　}

}

</script>

---

 

注意：

使用v-if和v-else是需要先引入ref的，不然會報錯