十二.Vue条件渲染

十二.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>

控制台运行如下

image.png

image.png

v-else

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

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

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

image.pngimage.png

v-else-if

2.1.0 新增

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

浏览器显示如下图 

image.png

image.png

假如有这样一个需求,用户登录既可以通过用户名进行登录也可以通过用户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>

浏览器显示如下

image.png

image.png

详细代码如下

<!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,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/8022

发表评论