day62-条件渲染

条件渲染

根据不同的条件进行相应的操作

v-show

当v-show=“false”该结构不在页面上显示

 使用v-show做条件渲染  
   <h2 v-show="false">欢迎来到{{name}}</h2>
   <h2 v-show="false">欢迎来到{{name}}</h2>

 

v-if

v-if可以搭配false和true或者表达式

v-if成立时该结构直接消失，在界面上被移除

同时v-if可以搭配v-else-if和v-else使用

 使用v-if做条件渲染  
   <h2 v-if="false">欢迎来到{{name}}</h2>
 ​
   <div v-if="n===1">gugu</div>
   <div v-else-if="n===2">mengmeng</div>
   <div v-else="n===3">nuonuo</div>

 

template

为了避免不必要的结构出现又保证代码简洁

使用template和v-if，不会影响代码的结构

<template v-if="n === 1">
 <!--    template只能和v-if配合使用    -->
         <h2>hello</h2>
         <h2>gugu</h2>
         <h2>henan</h2>
     </template>

 

总结

 <!--
     条件渲染：
         1.v-if
             v-if，v-else-if，v-else
             适用于：切换频率较低的场景
             特点，不展示的dom元素直接移除
             注意：v-if可以和v-else-if，v-else一起使用，但是结构不能被打断
         2.v-show
             v-show=“表达式”
             适用于：切换频率较高的场景
             特点：不展示的dom元素未被移除，仅仅是样式隐藏掉
         3.备注：使用v-if时，元素可能无法获取到，使用v-show一定能获取到
 ​
 -->

 

over