vue学习笔记11---条件渲染-CSDN博客

本文链接：https://blog.csdn.net/qq_59954212/article/details/127227240

条件渲染

1、v-if

v-if = “表达式”

v-else-if = “表达式”

v-else = “表达式”

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

特点：不展示的DOM元素直接被移除。

注意：v-if 和 v-else-if 、v-else 一起使用，要求结构不能被打断（不能只出现 v-else-if 或者v-else 而没有v-if ）。

2、v-show

v-show = “表达式”

适用于：切换频率较高的场景（只修改display属性）

特点：不展示的DOM元素未被移除，只是被隐藏。

3、对比

使用v-if时，元素可能无法获取到（从DOM树种移除）。而使用v-show时，元素一定可以获取到。

4、template与v-if 配合使用，不会破坏结构

<template v-if="n===1">

<h2>hello</h2>

<h2>vue</h2>

<h2>changsha</h2>

</template>

代码实现

<body>
    <div id="root">

        <h2>当前n值为：{{n}}</h2>
        <button @click="n++">点击 n+1</button>

        <!-- 使用v-show做条件渲染 -->
        <!-- v-show的底层实现，调整display -->
        <!-- <h2 v-show="true">welcome to {{name}}</h2> -->
        <!-- <h2 v-show="1 === 3">welcome to {{name}}</h2> -->
        
        <!-- 使用v-if做条件渲染 -->
        <!-- <h2 v-if="true">welcome to {{name}}</h2> -->
        <!-- <h2 v-if="1===1">welcome to CS</h2> -->

        <!-- v-show -->
        <!-- <div v-show="n===1">angular</div>
        <div v-show="n===2">react</div>
        <div v-show="n===3">vue</div> -->

        <!-- v-if和v-else-if和v-else -->
        <!-- <div v-if="n===1">angular</div>
        <div v-else-if="n===2">react</div>
        <div v-else-if="n===3">vue</div>
        <div v-else>hhhh</div> -->

        <!-- v-if或者v-show div包裹实现多行操作，但是会破坏结构 -->
        <!-- <div v-if="n===1">
            <h2>hello</h2>
            <h2>vue</h2>
            <h2>changsha</h2>    
        </div> -->

        <!-- template实现，不会破坏结构，只能与v-if配合使用，不能用v-show -->
        <template v-if="n===1">
            <h2>hello</h2>
            <h2>vue</h2>
            <h2>changsha</h2>    
        </template>

    </div>
</body>

<script>
    new Vue({
        el:'#root',
        data:{
            name:'CSU',
            n:0
        }
    })
</script>