Vue教学7（条件渲染v-show，v-if，v-else-if，v-else，v-if与template配合）

鸠桉

已于 2024-03-06 14:19:26 修改

阅读量426

点赞数 7

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2024-03-06 13:52:05 首次发布

本文链接：https://blog.csdn.net/HJERSON/article/details/136502948

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

条件渲染

1.v-show

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

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

特点：不展示的DOM元素并未移除，仅仅是使用样式隐藏掉

2.v-if

写法：

（1）v-if=“表达式”

（2）v-else-if=“表达式”

（3）v-else=“表达式”

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

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

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

3.备注：

使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到

1.v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <!--    使用v-show做条件渲染，不仅可以写表达式，也可以写true和false，且也可以Vue表达式-->
    <!--    使用表达式-->
    <h2 v-show="1===1">{{name}}</h2>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            name: "Hello World"
        },
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <!--    使用v-show做条件渲染，不仅可以写表达式，也可以写true和false，且也可以Vue表达式-->
    <!--    使用true-->
    <h2 v-show="true">{{name}}</h2>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            name: "Hello World"
        },
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <!--    使用v-show做条件渲染，不仅可以写表达式，也可以写true和false，且也可以Vue表达式-->
    <!--    使用Vue表达式-->
    <h2 v-show="a">{{name}}</h2>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            a:true,
            name: "Hello World"
        },
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <!--    使用v-show做条件渲染，不仅可以写表达式，也可以写true和false，且也可以Vue表达式-->
    <!--    使用false时-->
    <h2 v-show="false">{{name}}</h2>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            name: "Hello World"
        },
    })
</script>
</body>
</html>

2.v-if

v-if 同 v-show 差不多，不同的是如果为false时，与v-if绑定的元素就直接被删掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2 v-if="false">{{name}}</h2>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            name: "Hello World"
        },
    })
</script>
</body>
</html>

3.v-else-if 和v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="n++">点我n+1</button>

    <div v-if="n===1">张三</div>
    <div v-else-if="n===2">李四</div>
    <div v-else-if="n===3">老五</div>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            n:0,
            name: "Hello World"
        },
    })
</script>
</body>
</html>

会看到当点击按钮时并触发了v-if里面的表达式时，就会显现与v-if绑定的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="n++">点我n+1</button>

    <div v-if="n===1">张三</div>
    <div v-else-if="n===2">李四</div>
    <div v-else-if="n===3">老五</div>
<!--    在此处若在填个v-else时，因在初始化时n=0，且前三个并没有达到表达式的要求，所以初始化直接会出现与v-else绑定的元素-->
    <div v-else>真六</div>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            n:0,
            name: "Hello World"
        },
    })
</script>
</body>
</html>

4.v-if与template的配合使用

首先先来看看v-if与div标签的配合是怎样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="n++">点我n+1</button>

    <div v-if="n===1">
        <h2>张三</h2>
        <h2>李四</h2>
        <h2>老五</h2>
    </div>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            n:0,
            name: "Hello World"
        },
    })
</script>
</body>
</html>

接下来再来看看v-if与template的配合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="n++">点我n+1</button>

    <template v-if="n===1">
        <h2>张三</h2>
        <h2>李四</h2>
        <h2>老五</h2>
    </template>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el: "#root",
        data: {
            n:0,
            name: "Hello World"
        },
    })
</script>
</body>
</html>

鸠桉

关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Vue教学7（条件渲染v-show，v-if，v-else-if，v-else，v-if与template配合）

【代码】Vue教学7（条件渲染v-show，v-if，v-else-if，v-else，v-if与template配合）
复制链接

扫一扫