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. Java正则表达式语法及简单示例

    import java.util.regex.Matcher; import java.util.regex.Pattern; public class TestMatcher { public st ...

  2. 李沐多模态串讲视频总结 ALBEF VLMo BLIP CoCa BEITv3 模型简要介绍

    开场 多模态串讲的上篇是比较传统的多模态任务 多模态最后的模态交互很重要 传统的缺点是都用了预训练的目标检测器,训练和部署都很困难. ViLT 把预训练的目标检测器换成了一层的 Patch Embed ...

  3. EasyExcel 无法读取图片？用poi写了一个工具类

    在平时的开发中,经常要开发 Excel 的导入导出功能.一般使用 poi 或者 EasyExcel 开发,使用 poi 做 excel 比较复杂,大部分开发都会使用 EasyExcel 因为一行代码就 ...

  4. Springboot整合Apollo

    一.Apollo作用 随着程序功能的日益复杂,程序的配置日益增多:各种功能的开关.参数的配置.服务器的地址-- 对程序配置的期望值也越来越高:配置修改后实时生效,灰度发布,分环境.分集群管理配置,完善 ...

  5. Centos7离线安装gcc4.8

    有时候CentOS工作在无互联网的环境下,需要在离线环境下安装一些组件,这次实现的是模拟在离线环境下安装gcc4.8. 第一步: 先去http://mirrors.aliyun.com/centos/ ...

  6. Oracle自定义数据类型

    1 CREATE OR REPLACE FUNCTION split(p_str IN clob, 2 p_delimiter IN VARCHAR2 default (',') --分隔符,默认逗号 ...

  7. Pyechart绘图基础

    1.绘制散点图 from pyecharts.charts import Scatter import pyecharts.options as opts import numpy as np x = ...

  8. Solo 开发者周刊 （第2期）：一站式解决各类办公绘图问题

    这里会整合 Solo 社区每周推广内容.产品模块或活动投稿,每周五发布.在这期周刊中,我们将深入探讨开源软件产品的开发旅程,分享来自一线独立开发者的经验和见解.本杂志开源,欢迎投稿. 好文推荐 重新思 ...

  9. CPU的实模式

    实模式是指CPU的寻址方式,寄存器大小,指令用法等,是用来反应CPU在该环境下如何工作的概念. CPU的工作原理:CPU大体分为三个部分,控制.运算.存储单元. 控制单元是CPU的控制中心,大致由指令 ...

  10. 推荐2款.NET开源、轻便、实用的Windows桌面启动器

    Flow Launcher Flow Launcher是一款.NET开源(MIT License).免费.功能强大.方便实用的 Windows 文件搜索和应用程序启动器,能够帮助你快速查找文件.启动应 ...