1.背景

2.v-if简单使用

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->

  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

  <script src="./js/vue.js"></script>

</head>

<body>

<div id="app">

  <h3>{{title}}</h3>

  <pre>

    v-if的原理：

    v-if后面的条件为false时，对应的元素以及其子元素不会渲染。

    也就是根本没有不会有对应的标签出现在DOM中。

  </pre>

  <hr>

  当前分数为:{{number}}

  <br>

  分数等级为:

  <p v-if="number>=90">A</p>

  <p v-else-if="number>=80">B</p>

  <p v-else-if="number>=70">C</p>

  <p v-else-if="number>=60">D</p>

  <p v-else>E</p>

</div>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      title: '条件判断-if使用',

      name: 'ldp',

      number: 60

    }

  });

</script>

</body>

</html>

3.v-if实现切换账号登录类型

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->

  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

  <script src="./js/vue.js"></script>

</head>

<body>

<div id="app">

  <h3>{{title}}</h3>

  <pre>

   需求:

    假设做一个登录页面

    默认使用微信登录,点击切换按钮,可以使用QQ登录

  </pre>

  <hr>

  <div>

    <span v-if="type==='QQ'">

      <label>QQ号:</label>

      <input placeholder="请输入QQ账号">

    </span>

    <span v-else>

      <label>微信号:</label>

      <input placeholder="请输入微信号">

    </span>

    <button @click="changeType">账号类型切换</button>

  </div>

  <hr>

  <div>

    <pre>

1.问题：

如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。

但是按道理讲，我们应该切换到另外一个input元素中了。

在另一个input元素中，我们并没有输入内容。

为什么会出现这个问题呢？

2.原因：

这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。

在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。

3.解决方案：

如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key

并且我们需要保证key的不同

    </pre>

  </div>

  <hr>

  <div>

    <span v-if="type==='QQ'">

      <label>QQ号:</label>

      <input placeholder="请输入QQ账号" key="qq-input">

    </span>

    <span v-else>

      <label>微信号:</label>

      <input placeholder="请输入微信号" key="wx-input">

    </span>

    <button @click="changeType">账号类型切换</button>

  </div>

</div>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      title: '条件判断-if实现账号登录切换',

      name: 'ldp',

      type: 'QQ'

    },

    methods: {

      changeType() {

        this.type = this.type === 'QQ' ? 'WX' : 'QQ'

      }

    }

  });

</script>

</body>

</html>

4.v-if与v-show的区别

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->

  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

  <script src="./js/vue.js"></script>

</head>

<body>

<div id="app">

  <h3>{{title}}</h3>

  <pre>

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：

v-if和v-show对比

v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？

v-if当条件为false时，压根不会有对应的元素在DOM中。

v-show当条件为false时，仅仅是将元素的display属性设置为none而已。

开发中如何选择呢？

当需要在显示与隐藏之间切片很频繁时，使用v-show

当只有一次切换时，通过使用v-if

  </pre>

  <hr>

  <div>

    <span v-show="showQQ">

      <label>QQ号:</label>

      <input placeholder="请输入QQ账号">

    </span>

    <span v-show="!showQQ">

      <label>微信号:</label>

      <input placeholder="请输入微信号">

    </span>

    <button @click="changeType">账号类型切换</button>

  </div>

</div>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      title: '条件判断v-show与if的区别',

      name: 'ldp',

      showQQ: true

    },

    methods: {

      changeType() {

        this.showQQ = this.showQQ ? false : true

      }

    }

  });

</script>

</body>

</html>

完美!

vue之条件判断v-if与v-show的更多相关文章

  1. 一起学Vue之条件判断

    在Vue进行前端开发中,条件判断主要用于根据不同的条件来决定显示或隐藏,或者进行视图之间的切换,本文以一个简单的小例子简述v-if的常见用法,仅供学习分享使用,如有不足之处,还请指正. v-if 指令 ...

  2. vue v-if条件判断

    <view class='circle-G' v-if="item.status === 'G'"></view> <view class='circ ...

  3. vue学习笔记（二）- 数据绑定、列表渲染、条件判断

    vue的数据绑定和列表渲染的造轮子 GitHub:八至 作者:狐狸家的鱼 双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面 页面->数据 适用:input.select. ...

  4. POJ 2762 Going from u to v or from v to u? （判断单连通）

    http://poj.org/problem?id=2762 题意:给出有向图,判断任意两个点u和v,是否可以从u到v或者从v到u. 思路: 判断图是否是单连通的. 首先来一遍强连通缩点,重新建立新图 ...

  5. POJ - 2762 Going from u to v or from v to u? (强连通缩点+判断单向连通)

    题意:判断一个有向图中的任意两点u.v,是否可以由其中一个点到达另一个点. 分析:这个问题转化以后就是:将该图强连通缩点后再判断其是否是单向连通的.缩点用Tarjan处理强连通分量. 有一个定理是这样 ...

  6. vue数据渲染、条件判断及列表循环

    1.数据渲染  {{msg}} <template> <div id="app"> {{msg}} </div> </template&g ...

  7. vue条件判断循环

    条件判断 v-if <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. C# if中连续几个条件判断

    C# if中连续几个条件判断 1.if (条件表达式1 && 条件表达式2) 当条件表达式1为true时 using System; using System.Collections. ...

  9. shell条件判断与流程控制

    一 条件判断式语句 1.按文件类型进行判断 测试类型 作用 -b 文件 判断文件是否存在,并且是否为块设备文件(是块设备文件为真) -c 文件 判断文件是否存在,并且是否为字符设备文件(是字符设备设备 ...

  10. 为什么说在使用多条件判断时switch case语句比if语句效率高？

    在学习JavaScript中的if控制语句和switch控制语句的时候,提到了使用多条件判断时switch case语句比if语句效率高,但是身为小白的我并没有在代码中看出有什么不同.去度娘找了半个小 ...

随机推荐

  1. Task2 -- 关于Lecture3

    Smiling & Weeping ---- 玲珑骰子安红豆, 入骨相思知不知. 1. 学习Git分支管理: Git分支是灵活开发的关键.创建.切换和合并分支是基础操作.使用如下命令: bas ...

  2. CLR via C# 笔记 -- 线程基础(26)

    1. Microsoft 设计这个OS内核时,决定在一个进程中运行应用程序的每个实例.进程实际是应用程序的实例要使用的资源的集合.每个进程都被赋予了一个虚拟地址空间,确保在一个进程中使用的代码和数据无 ...

  3. 高通lk阶段mipi 代码解析以及新屏幕添加

    参考:https://www.cnblogs.com/linhaostudy/p/9237526.html 背景 前段时间做了这块的工作,但总结完以后领导说我的认识还是过于肤浅,因此重新再看了一下. ...

  4. bs4解析-优美图库

    import requests from bs4 import BeautifulSoup url = 'http://www.umeituku.com/bizhitupian/meinvbizhi/ ...

  5. Mac下安装Redis，附可视化工具Medis

    导读 我之前写过很多相关的redis的博文,有时候,为了开发,还得去虚拟机上搭建一个redis,感觉太麻烦了,为了做个demo,直接在自己mac本上安装一个即可. Redis 从入门到精通:点我直达 ...

  6. Spring 常见的事务管理、事务的传播特性、隔离级别

    事务管理 事务:多个操作,要么同时成功,要么失败后一起回滚 具备ACID四种特性 Atomic(原子性) Consistency(一致性) lsolation(隔离性) Durablility(持久性 ...

  7. SpringBoot中使用Servlet3.0注解开发自定义的拦截器

    使用Servlet3.0的注解进行配置步骤 启动类里面加@ServletComponentScan,进行扫描 新建一个Filter类,implements Filter,并实现对应的接口 @WebFi ...

  8. Java智能之Spring AI：5分钟打造智能聊天模型的利器

    前言 尽管Python最近成为了编程语言的首选,但是Java在人工智能领域的地位同样不可撼动,得益于强大的Spring框架.随着人工智能技术的快速发展,我们正处于一个创新不断涌现的时代.从智能语音助手 ...

  9. supervisor.conf部署及维护

    启动服务 supervisord -c /etc/supervisord.conf 启动服务 supervisorctl start 关闭服务 supervisorctl stop

  10. C# 泛型单例工厂

    核心代码,线程安全 class SingletonFactory<T> where T : new() { private static T uniqueInstance; private ...