条件渲染篇

条件渲染

一、总结

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节点，会存在一定的效率问题。