十二.Vue条件渲染

最新推荐文章于 2024-05-27 17:16:48 发布

凌枫zero

最新推荐文章于 2024-05-27 17:16:48 发布

阅读量247

点赞数 1

分类专栏： vue.js 文章标签： Vue.js Vue.js的条件渲染 v-if v-else-if v-else

本文链接：https://blog.csdn.net/qq_43674132/article/details/104877177

版权

vue.js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一.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>

凌枫zero

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十二.Vue条件渲染

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

扫一扫