vueDay04——v-if else show

一、v-if的使用

我们可以像c语言一样去使用v-if结构

比如单用v-if，连用v-if  v-else，或者是v-if v-else-if v-else

注意：

1.v-if v-else-if需要绑定值,而v-else不需要绑定值

2.if结构可以用在不同的标签类型之间

<div v-if="firstShowFlag">
        first被渲染
</div>
<div v-else-if="secondShowFlag">
        second被渲染
</div>
<p v-else>
        third被渲染
</p>

我们可以利用一个button绑定一个方法区实现某些样式的切换，但是感觉不如class与style绑定来的实在，但是好处是逻辑比较清晰，如果用绑定的方式不容易一眼看出逻辑

    <button @click="changevalue">
        点击我进行切换
    </button>
    <div v-if="showFlag">
        <h1>Vue is awesome!</h1>
    </div>
    <div v-else>
        <h1>Oh no 😢,我是菜🐔</h1>
    </div>

const showFlag = ref(true)
const changevalue = () => {
    showFlag.value = !showFlag.value
}

还有一点template上的v-if这个没看懂，草草草草草

二、v-if和v-show的大同小异

相同点就是，他们二者都可以控制标签是否渲染，可以选择性的控制元素的显示

不同点就是 

1.v-show不支持在template上面使用

2.v-show并不会擦除本身标签，而是切换了一个叫display的CSS样式

3.v-if每次都会被销毁或者创建，而v-show只会将其藏起来或者显示出来

4.v-if只有在第一次为true的时候才会渲染 而v-show不管怎么都会渲染

三、全部代码

 

<template v-if="trueFlag">
    <button @click="changevalue">
        点击我进行切换
    </button>
    <div v-if="showFlag">
        <h1>Vue is awesome!</h1>
    </div>
    <div v-else>
        <h1>Oh no 😢,我是菜🐔</h1>
    </div>
</template>
 
<script lang="ts" setup>
// import { defineComponent } from '@vue/composition-api'
import { ref } from 'vue'
// false true
const booleanFlagArray = ref([false,false,false]) 
const firstShowFlag = ref(booleanFlagArray.value[0])
const secondShowFlag = ref(booleanFlagArray.value[1])
const thirdShowFlag = ref(booleanFlagArray.value[2])
 
const showFlag = ref(true)
const falseFlag = ref(false)
const trueFlag = ref(true)
 
const changevalue = () => {
    showFlag.value = !showFlag.value
}
</script>