第7集丨Vue 江湖 —— 条件渲染

最新推荐文章于 2024-07-23 21:45:00 发布

秋堂主

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量78

点赞数

分类专栏： Vue2江湖文章标签： vue.js javascript ecmascript 前端

本文链接：https://blog.csdn.net/DUQGQG/article/details/132129748

版权

Vue2江湖专栏收录该内容

19 篇文章 0 订阅

订阅专栏

2.1 基本使用

<h2 v-if="false">欢迎来到：{{name}}</h2>
<h2 v-if="1===1">欢迎来到：{{name}}</h2>

生成的页面的DOM结构如下所示，可以看到表达式的值为false的时候，元素不会渲染在页面中。
在这里插入图片描述

2.2 条件渲染分组

用法：在 <template> 元素上使用 v-if 条件渲染分组。

注意：template只能和v-if配合使用，不能和v-show配合

由于 v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。如下代码所示：

<template v-if="n===1">
    <h3>V</h3>
    <h3>U</h3>
    <h3>E</h3>
</template>

2.3 与 v-else-if、v-else 结合使用

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>好好学习，天天向上！</div>

三、v-if vs v-show

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

四、测试案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.min.js"></script>
</head>
<body>
    <div id="root">
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点击n++</button>
        <!-- 使用v-show做条件渲染 -->
        <h2 v-show="false">欢迎来到：{{name}}</h2>
        <h2 v-show="1===1">欢迎来到：{{name}}</h2>

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

        
        <div v-show="n===1">Angular</div>
        <div v-show="n===2">React</div>
        <div v-show="n===3">Vue</div>
        
        <div v-if="n===1">Angular(v-if)</div>
        <div v-else-if="n===2">React</div>
        <div v-else-if="n===3">Vue</div>
        <div v-else>好好学习，天天向上！</div>

        <!-- v-if和template配合使用 -->
        <template v-if="n===1">
            <h3>V</h3>
            <h3>U</h3>
            <h3>E</h3>
        </template>

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

秋堂主

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第7集丨Vue 江湖 —— 条件渲染

本节`条件渲染`所涉及到的指令有：`v-show`、 `v-if`、`v-else-if`、`v-else`。`v-if` 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 `true`值的时候被渲染。`v-if`可以和`v-else-if`、 `v-else` 一起使用，但要求结构不能被**打断**，即用该指令的结构要挨在一起。
复制链接

扫一扫