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. OAuth + Security - 2 - 资源服务器配置

    PS:此文章为系列文章,建议从第一篇开始阅读. 资源服务器配置 @EnableResourceServer 注解到一个@Configuration配置类上,并且必须使用ResourceServerCo ...

  2. es语法 rest api 模拟query 根据中文姓名搜索demo

    es语法 rest api 模拟query 根据中文姓名搜索demo order_info_es/_doc/40094182abc GET order_info_es/_settings?pretty ...

  3. CodeForces 1935A

    题目链接:Entertainment in MAC 思路 当当前操作次数n为偶数时,若原字符串大于反转字符串则可以将原字符串反转n - 2次,则得到的还是原字符串,此时反转一次,并将其再次反转的字符串 ...

  4. Java实现管线拓扑关系连通性分析

    管线拓扑关系的连通性分析通常涉及图论(Graph Theory)中的概念,特别是无向图(Undirected Graph)的遍历算法,如深度优先搜索(DFS, Depth-First Search)或 ...

  5. springboot使用mail提示没有该类型的bean

    @Autowired private JavaMailSenderImpl javaMailSender; 自动注入时提示没有该类型的Bean. 原因 没有配置邮件发送相关的配置信息. spring: ...

  6. P2467 [SDOI2010] 地精部落 学习笔记

    DP 显然我固定第一个是峰,然后再乘以2就是答案,因为一个合法的反转之后也是合法的而且谷峰颠倒了 发现如果设\(dp[i][j]\)表示前\(i\)个山脉,第\(i\)个山脉是高度\(j\)的答案,然 ...

  7. logo描边

  8. Mybatis下划线自动映射驼峰字段

    mybatis-config.xml <!--下划线自动映射驼峰字段--> <settings> <setting name="mapUnderscoreToC ...

  9. 妙趣横生：利用Echarts实现SpreadJS引用从属关系的可视化魅力

    最新技术资源(建议收藏) https://www.grapecity.com.cn/resources/ 在金融行业,我们经常会有审计审查的需求,对某个计算结果进行审查,但是这个计算结果可能依赖多个单 ...

  10. [oeasy]python0035_ 整合shell编程_循环_延迟_清屏

    ​ 整合shell编程 回忆上次内容 用\r 可以让输出位置回到行首 原位刷新时间 如果想要的是大字符效果 需要使用 figlet 但同时还希望能刷新 ​ 编辑 这可能吗? 建立脚本 我们得熟悉一下s ...