Vue的开始

Vue条件渲染 v-if与 v-show

​ 条件渲染：

​ 1.v-if

​ 写法：

​ (1).v-if=”表达式”

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

​ (3).v-else=”表达式”

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

​ 特点：不展示的DOM元素直接被移除。（不会出现在HTML文件中）

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

​ 2.v-show

​ 写法：v-show=”表达式”

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

​ 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉（display：none）

​

​ 3.v-if可以和template配合使用，使多个元素一起显示/隐藏，而不影响布局

​ 4.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

​ 因为 v-show，还存在于页面中，而v-if没有

v-if

<!-- 使用v-if坐条件渲染 -->
        <div v-if="表达式"> </div>
           <div v-if="false"> </div>
           <div v-if="1===1"> </div>
       
      
       <!-- v-else和v-else-if  -->
       
       <div v-if="false"> </div>
       <div v-elseif="1===1"> </div> 

       <!-- v-if,template配套使用，不破坏布局 -->
       <template v-if="show">
           <h2>nihao$</h2>
           <h2>nihao$</h2>
           <h2>nihao$</h2>
       </template>

v-show

<!-- 使用v-show做条件渲染 -->
       
            <div v-show="表达式"> </div>
            <div v-show="false"> </div>
            <div v-show="1===1"> </div>