条件渲染篇

条件渲染

一、总结

1.v-if

写法:(1)v-if=“表达式”

​ (2)v-else-if=“表达式”

​ (3)v-else

​ 适用于:切换频率较低的场景

​ 特点:不展示的DOM元素直接被移除

​ 注意:v-if可以和v-else-if、v-else一起使用,但要求结构不能被“打断”

​ 2.v-show

​ 写法:v-show=“表达式”

​ 适用于:切换频率较高的场景

​ 特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉

​ 3.备注:

​ 使用v-if时,元素可能无法获取到,而使用v-show一定可以获取到(v-show只是在页面上被隐藏了,想要获取这个节点还是能够获取到,但是v-if一旦值为false,它就从页面上没了)

二、

1、使用v-show作条件渲染

底层实现:v-show的底层实现实际上就是 style=“display:none” ,在开发者工具中还能够看到这个结构

不同写法:如果不想直接写布尔值true或者false,可以写一个表达式,只要这个表达式能够转为一个布尔值就可以,例如 2===3 就相当于false

<h2 v-show="true">欢迎来到{{name}}</h2> 

2、使用v-if渲染

实现:v-if比较彻底,使用了v-if,在开发者工具中都找不到这个结构了

<h2 v-if="false">欢迎来到{{name}}</h2> 
  <div v-if="n === 1">Angular</div>
  <!-- 执行了上边的语句之后,下面的内容依然会进行判断 -->
  <div v-if="n === 2">React</div>
  <div v-if="n === 3">Vue</div>

如果使用多个v-if,那么每一条语句都会被判断;如果是一个内容中的多个判断语句,那么这么写效率不会很高,可以使用v-if,v-else-if,v-else,它们的逻辑和if,else if,else一样,是一组判断,只要符合其中之一,其余的逻辑分支就不会再判断

使用v-else时候,建议后面不再写表达式,因为写了也不会再判断了

这一套逻辑语句之间不能被打断,一旦被打断,打断语句后面的语句就都不会实现了

        <div v-if="n === 1">Angular</div>
        <!-- 打断的语句 -->
        <div>妈呀</div> 
        <div v-else-if="n === 1">React</div>
        <div v-else-if="n === 3">Vue</div>
        <div v-else>哈哈</div>

template与v-if的搭配使用

如果想要把下面的三个h2一起显示,加个div会破坏结构,可以加个template, template不会影响结构,在最终页面渲染的时候,会把给去掉

template只能配合v-if使用

        <template v-if="n ===1">
            <h2>你好</h2>
            <h2>严浩翔</h2>
            <h2>宋亚轩</h2>
        </template>

3、v-if和v-show

如果所写的内容有很高的的切换频率,也就是变化的比较频繁,建议使用v-show,因为v-show是节点在,只是动态的控制一下display为none, 但是如果所写内容变化很频繁,使用v-if不断地添加或者删除一个DOM节点,会存在一定的效率问题。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值