十二.Vue条件渲染

Java架构师必看

发布于 2021-05-14 14:46:20

7730

发布于 2021-05-14 14:46:20

十二.Vue条件渲染

强烈推介IDEA2020.2破解激活，IntelliJ IDEA 注册码，2020.2 IDEA 激活码

一.Vue初体验：https://blog.csdn.net/qq_43674132/article/details/104857216 二.Vue条件命令：https://blog.csdn.net/qq_43674132/article/details/104857322 三.Vue循环指令：https://blog.csdn.net/qq_43674132/article/details/104857517 四.Vue处理用户输入：https://blog.csdn.net/qq_43674132/article/details/104857651 五.Vue组件初体验：https://blog.csdn.net/qq_43674132/article/details/104857870 六.Vue实例：https://blog.csdn.net/qq_43674132/article/details/104857953 七.Vue模板语法：https://blog.csdn.net/qq_43674132/article/details/104858009 八.Vue计算属性：https://blog.csdn.net/qq_43674132/article/details/104858068 九.Vue.js侦听器：https://blog.csdn.net/qq_43674132/article/details/104860083 十.Vue.js的class绑定：https://blog.csdn.net/qq_43674132/article/details/104861826 十一.Vue style绑定：https://blog.csdn.net/qq_43674132/article/details/104877107 十二.Vue 条件渲染：https://blog.csdn.net/qq_43674132/article/details/104877177 十三.Vue 列表渲染：https://blog.csdn.net/qq_43674132/article/details/104877393 十四.Vue事件处理：https://blog.csdn.net/qq_43674132/article/details/104878173 十五.Vue表单输入绑定：https://blog.csdn.net/qq_43674132/article/details/104879776 十六.Vue中引用图片：https://blog.csdn.net/qq_43674132/article/details/107043105

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 isShow 值的时候被渲染。如何让下面三个html标签里的内容同时显示和隐藏，可以使用template模板，它并不是一个真正的html节点，当下面的内容被渲染以后， template会被自动的移除掉

<template v-if="isShow">
        <p>hello vue</p>
        <div>hello liqinggang</div>
        <span>https://lqgjava.github.io/</span>
</template>

控制台运行如下

v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”：

<div v-else>斗罗大陆</div>

在控制台输出的就是如下图

v-else-if

2.1.0 新增

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

浏览器显示如下图

假如有这样一个需求，用户登录既可以通过用户名进行登录也可以通过用户qq邮箱进行登录，可以现在data中定义loginType:'username'

data:{
            isShow:false,
            gender:0,
            loginType:"username",
        }

<template v-if="loginType=='username'">
    <label>用户名</label>
    <input type="text" placeholder="请输入用户名">
</template>
<template v-else>
    <label>用户名</label>
    <input type="text" placeholder="请输入用户邮箱地址">
</template>

浏览器显示如下

详细代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的条件渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--vue的条件渲染：可以通过控制一个变量来决定元素是否来渲染它  v-if：这个指令接收bollean类型的变量，如果变量为true，这个元素就显示，为false就隐藏-->
<div id="app">
    <div v-if="isShow">hello vue!</div>
    <!--如何让下面三个html标签里的内容同时显示和隐藏，可以使用template模板，它并不是一个真正的html节点，当下面的内容被渲染以后，
    template会被自动的移除掉-->
    <template v-if="isShow">
        <p>hello vue</p>
        <div>hello liqinggang</div>
        <span>https://lqgjava.github.io/</span>
    </template>
    <div v-else>斗罗大陆</div>
    性别：
    <div v-if="gender==0">男</div>
    <div v-else-if="gender==1">女</div>
    <div v-else>未知</div>
    <!--v-show既不支持template也不支持v-else-->
    <hr>
    <template v-if="loginType=='username'">
    <label>用户名</label>
        <!--input会元素复用，key表示唯一标记符，在v-for中会大量用到key，因为v-for会复用同一个input元素，要区分开来，就要设置不一样的key-->
    <input type="text" placeholder="请输入用户名" key="username">
</template>
    <template v-else>
        <label>用户名</label>
        <input type="text" placeholder="请输入用户邮箱地址" key="email">
    </template>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false,
            gender:0,
            loginType:"username",
        }
        });
</script>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

https