Vue : v-if, v-show

目录

v-show

v-if

---

v-show

    
    
    
    


    

        
hello world
    

如果isShow为false, 那么v-show = false相当于将其隐藏了, 当然, 里面不一定需要data里面的属性, 里面也可以是一个表达式, 例如

        
hello world

那么就给他隐藏掉了, 查看控制台元素:

得知, 他并没有被删除到, 而是设置了style属性将其隐藏了/

v-if

        同v-show一样, 也是条件渲染, 但是v-if里面的值如果为false ,那么就会直接将其彻底从html中删除, 而不是隐藏

        v-if通常配合v-else-if来使用, 这个可以和java的流程语句来对比, 他们之间的用法是类似的. 多个判断if 和if else判断, 然后使用v-else来结尾. 但是需要注意的是, v-else是不需要值的:

        
hello world
        
1
        
1
        
1
        
1

        但是需要记住的是, 多个v-if v-else的html标签必须连写在一起, 他们中间不允许有其他的标签:

下面是一种错误的写法:

        
hello world
        
1
        
你好呀
        
1
        
1
        
1

        那么这个div里面就是打断整个流程的点, 在这个点前面的内容是正常生效的, 但是后面的v-else-if是不会生效的

        v-if和template的使用:

        template不能和v-show一起使用