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结构可以用在不同的标签类型之间

        first被渲染


        second被渲染


        third被渲染

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

    
        点击我进行切换
    
    

        
Vue is awesome!
    
    

        
Oh no ,我是菜
    

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不管怎么都会渲染

三、全部代码