Vue.js的核心学习笔记 - 第七章条件渲染对象数据

Marinda_Speed

已于 2022-02-22 23:30:45 修改

阅读量457

点赞数

分类专栏： Vue.js 文章标签： vue.js 学习 javascript

于 2022-02-22 23:29:53 首次发布

本文链接：https://blog.csdn.net/qq_33638188/article/details/123079812

版权

Vue.js 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

Vue.js的核心学习笔记 - 第七章条件渲染对象数据

前言
v-if 及 v-else-if 及 v-else条件渲染
- demo
- 温馨提示
v-show
- demo
结束语

前言

今天我们来学习一下条件渲染数据，在日常普遍开发中，我们总会遇到有一些需要我们来回切换DOM元素的展示标签，但是来回都是设置CSS样式中的display属性，我们的Vue提供了一个很快捷方便的方式，就是条件渲染

v-if 及 v-else-if 及 v-else条件渲染

条件渲染语句格式三种分别为
例：

<template v-if="动态元素条件">
<template v-else-if = "动态元素条件">
<template v-else = "动态元素条件">

注：类似我们后端语言或JS等语言的流程控制语句IF。

demo

上代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js的核心学习笔记 - 第七章条件渲染对象数据</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="defaultDemoTest">
            <!-- 模板 -->
            <template v-if="flag">
                <!-- 绑定flag -->
                <div :class="[{flag: flag},active]">
                    <p>如果flag是true则显示这个</p>
                </div>
            </template>
            <!-- 取反 -->
            <template v-else>
                <div :class="{active: active}">
                    <p>如果flag为false则显示这个</p>
                </div>

            </template>
        </div>
        <div class="demoElseIf">
            <template v-if="userName == 'demo'">
                <p>如果为true则显示这个Active</p>
            </template>
            <template v-else-if="userName == 'admin'">
                <p>如果为admin则显示这个Admin</p>
            </template>
            <template v-else>
                <p>都不为指定的出现！</p>
            </template>
        </div>
    </div>
</body>
<script type="text/javascript">

    var vue = new Vue({
        el: "#app",
        data: {
            flag: false,
            active: true,
            userName: "demo"
        }
    })
</script>

</html>

以上根据flag 以及active 和 userName 的变化而显示相应的DOM元素模板

温馨提示

值得一提的是，else-if一定要在 v-else 前和v-if 或 v-else-if 之间。
v-if这种方式并不会直接作用于在页面中存在DOM元素，不满足及直接替换！

v-show

问：为什么if 不满足功能了，还出现第二个了呢？区别在哪
答：跟if不同的是，这种方式类似于直接给元素上一个display的属性，隐藏或显示，最终会在DOM一直存在！

不明白，看Demo

demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="defaultDemoTest">
            <!-- 模板 -->
            <template v-if="flag">
                <!-- 绑定flag -->
                <div :class="[{flag: flag},active]">
                    <p>如果flag是true则显示这个</p>
                </div>
            </template>
            <!-- 取反 -->
            <template v-else>
                <div :class="{active: active}">
                    <p>如果flag为false则显示这个</p>
                </div>

            </template>
        </div>
        <div class="demoElseIf">
            <template v-if="userName == 'demo'">
                <p>如果为true则显示这个Active</p>
            </template>
            <template v-else-if="userName == 'admin'">
                <p>如果为admin则显示这个Admin</p>
            </template>
            <template v-else>
                <p>都不为指定的出现！</p>
            </template>
        </div>
        <div class="show">
            <div v-show="active">
                <p>当active满足显示这个</p>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">

    var vue = new Vue({
        el: "#app",
        data: {
            flag: false,
            active: true,
            userName: "demo"
        }
    })
</script>

</html>