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. JS模拟循环批量请求后台接口

    使用async, await处理异步请求.用Promise, setTimeout函数模拟后台接口 <!DOCTYPE html> <html> <script type ...

  2. Pytorch复制现有环境

    一,在本机上,打开anaconda Prompt直接使用 conda create -n 新环境名 --clone 旧环境名

  3. nginx 信号量

    nginx支持的信号量 TERM, INT fast shutdown QUIT graceful shutdown HUP changing configuration, keeping up wi ...

  4. C# pythonnet(2)_FFT傅里叶变换

    Python代码如下 import pandas as pd import numpy as np import matplotlib.pyplot as plt # 读取数据 data = pd.r ...

  5. 【仿真】Carla之Docker 运行 及 渲染相关 [6]

    参考与前言 carla官方对于docker 运行的描述: CARLA in Docker Docker的使用:[暂时没贴] 相关已知issue,欢迎补充 https://github.com/carl ...

  6. mermaid语法画图

    mermaid 脚本语言 graph TB 从上到下 graph BT 从下到上 graph RL 从右到左 graph LR 从左到右 graph LR; A001-->B001; graph ...

  7. P5494 题解

    来一发 \(O(\log n)\) 线性空间的解法. 考虑通过只维护线段树叶子节点的虚树的方法压缩空间,考虑记录下每个节点的编号,然后通过异或完求最低位的 \(1\) 的方式求出 LCA 的深度,然后 ...

  8. 树莓派4B-PCA9685驱动舵机

    前言 不知道你们有没有遇到过这么一种情况,直接用树莓派的引脚输出PWM控制舵机,舵机是会出现抖动的.就算代码进行一定的时延迟优化还是会有影响的. 现在我们可以使用PCA9685这个模块去驱动舵机. P ...

  9. Window版 MySQL可视化工具 Navicat 面安装免激活绿色版

    网盘地址 链接:https://pan.baidu.com/s/1T0WyhGAFEt28GaU4wXhfrg 提取码:z4ww navicat15破解版 链接:https://pan.baidu.c ...

  10. 【原创软件】第2期：CAD文字快速批量替换工具CFR（CAD_FastReplace_V4）

    01 背景 由于工作需要,开发了一套CAD文字快速批量替换软件CFR.主要目的是:实现dwg文件一次性完成单对/多对词组快速批量替换. 02 主要功能特色 (1)无需打开CAD,快速实现文字批量替换. ...