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的，不然会报错