vue v-if 多条件_vue if show

vue v-if 多条件_vue if showv-if在模板中,可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的。示例代码如下:<divid="app"><p

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

v-if

在模板中,可以根据条件进行渲染。条件用到的是v-ifv-else-if以及v-else来组合实现的。示例代码如下:

<div id="app">
    <p v-if="weather == 'sun'">今天去公园玩!</p>
    <p v-else-if="weather == 'rain'">今天去看电影!</p>
    <p v-else>今天哪儿也不去!</p>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            weather: 'sun'
        }
    });
</script>

 

<template>上使用v-if

有时候我们想要在一个条件中加载多个html元素,那么我们可以通过template元素上实现。示例代码如下:

<div id="app">
    <template v-if="age<18">
        <p>数学多少分?</p>
        <p>英语多少分?</p>
    </template>
    <template v-else-if="age>=18 && age<25">
        <p>结婚了吗?</p>
        <p>考研究生了吗?</p>
    </template>
    <template v-else>
        <p>加薪了吗?</p>
        <p>工资多少?</p>
    </template>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            age: 24
        }
    });
</script>

 

用 key 管理可复用的元素

另外,在模板中,Vue会尽量重用已有的元素,而不是重新渲染,这样可以变得更加高效。如果你允许用户在不同的登录方式之间切换:

<div id="app">
  <template v-if="loginType === 'username'">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" placeholder="用户名">
  </template>
  <template v-else>
    <label for="email">Email</label>
    <input type="text" id="email" name="email" placeholder="邮箱">
  </template>
  <div>
    <button @click="changeLoginType">切换登录类型</button>
  </div>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      loginType: "username"
    },
    methods: {
      changeLoginType(){
        // 如果类型为username,则切换成email,否则反之
        this.loginType = this.loginType==="username"?"email":"username";
      }
    }
  })
</script>

接下来我们查看下效果图
vue v-if 多条件_vue if show
这个里面会有一个问题,就是如果我在username的输入框中输入完信息,切换到邮箱中,之前的信息还是保留下来,这样肯定不符合需求的,如果我们想要让html元素每次切换的时候都重新渲染一遍,可以在需要重新渲染的元素上加上唯一的key属性,其中key属性推荐使用整形,字符串类型。示例代码如下

<div id="app">
  <template v-if="loginType === 'username'">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" placeholder="用户名" key="username">
  </template>
  <template v-else>
    <label for="email">Email</label>
    <input type="text" id="email" name="email" placeholder="邮箱" key="email">
  </template>
  <div>
    <button @click="changeLoginType">切换登录类型</button>
  </div>
</div>

我们可以看到用户名原来输入的123切换到邮箱方式时,输入框中的123不见了
注意,<label>元素仍然会被高效地复用,因为它们没有添加key属性。
 

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样:

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display

注意,v-show 不支持 <template> 元素,也不支持 v-else
 

v-if 对比 v-show

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165400.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • ubuntu升级python版本

    ubuntu升级python版本Ubuntu16.04默认安装了Python2.7和3.5请注意,系统自带的python千万不能卸载!输入命令python按Ctrl+D退出python命令行输入命令sudoadd-apt-repositoryppa:jonathonf/python-3.6按Enter确认输入命令sudoapt-getupdate输入命令sudoapt-geti…

  • react路由守卫(路由拦截)

    react路由守卫(路由拦截)react不同于vue,通过在路由里设置meta元字符实现路由拦截。在使用Vue,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到404或者登陆页面,比如Vue中的beforeEnter函数:…router.beforeEach(async(to,from,next)=>{consttoPath=to.path;constfromPath=from.path;})…react实现路由拦截的基

  • 288÷4×7解决什么问题_java has not been found

    288÷4×7解决什么问题_java has not been found前言:今天连接zookeepter的时候出现问题(上午连接的时候还没问题的,下午就出现了问题,很是无奈)报错信息如下:java.net.ConnectException:Connectiontimedout:nofurtherinformation atsun.nio.ch.SocketChannelImpl.checkConnect(NativeMethod) ats…

  • pycharm怎么编译代码_python编程

    pycharm怎么编译代码_python编程python可以说是新的编程语言,虽说是新编程,但一出来,就受到很长程序员的关注,而且刚出现和java进行对比,很多人就拿python和java进行比较,想python到底好不好,他和java有什么区别,要想知道他们的区别,还是要了解python比较好,要知道python知识,今天我们就来看看python里的pycharm编写代码的方式教学。1、新建项目location:为创建项目的地址(或者叫文…

  • linux 查看网卡以及开启网卡「建议收藏」

    linux 查看网卡以及开启网卡「建议收藏」解决Error:Nosuitabledevicefound:nodevicefoundforconnection”Systemeth0″解决使用VMware克隆出来的新虚拟机无法联网的问题一.背景我们安装好了一个虚拟机,我想做分布式集群,想模拟几台服务器,这时就想直接复制已经有的安装好的虚拟机,这样比较省事,不要在重复的安装虚拟机并配置JAVA环境,省…

    2022年10月19日
  • 台式计算机网线,台式电脑如何连接宽带_台式电脑如何连接网线

    台式计算机网线,台式电脑如何连接宽带_台式电脑如何连接网线2017-03-1121:36:28电脑直接拨号上网(有宽带账号和密码)或者自动获取IP(有帐号没密码)上方式设置见图2016-12-1013:29:30右击网上邻居,点属性,创建一个新的连接,按照下一步下一步的步骤就可以了,然后成功之后输入你的宽带号码和密码就可以了,如果你使用的是ASDL拨号的,你可以下一个宽带我世界,电信的话你…2016-12-2917:28:19方法如下1、第一,…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号