本次案例讲解:v-if,v-show,v-else,v-else-if和key值的相关用法!!!
v-if指令:
//通过一个(v-if)指令 ,可以结合js表达式的返回值,决定一个标签是否在页面上展示或决定一个标签是否在页面上存在
//显示效果如下:  v-if指令并不会显示div标签  (为了显示效果明显,特意在此页面中给div的父级设置了粉色背景颜色,便于看出页面的改变)
 //可以看到,调用v-if,设置为false后,div并不会显示出来。
//当在控制台中,改变v-if的值为true后,div就显示出来了。如下图:

//查看html代码,也有显示div标签内容了,如下图:

===========================================================

v-show指令:

//v-show和v-if的代码相似,只要改一下指令就行了。

//v-show在页面中的显示效果如下:  (v-show会把div的display属性显示为none的效果)

//在控制台中设置v-show的值为true后,页面显示效果如下:  (div标签的display属性消失了)

//综上,v-show指令和v-if指令的效果类似,都是让DOM元素显示或消失。但两者也有点区别:v-if设置的DOM元素只有设置的值为true,才会在页面中加载出来;而v-show设置的DOM元素与display有关,不管display属性的值为none还是block,都会直接显示在页面上,驻留在html代码之中,通过改变display的值来改变DOM元素的显示与否。所以v-show的效果会比v-if好,若要显示/隐藏一个DOM元素,选用v-show最佳

===========================================================

v-else指令:

注意:v-else中不需要添加js语法  而且v-if和v-else需要连着用才行

//因为show的值为false,所以v-if指令不会被执行,而会执行v-else指令,如下图:

//当修改了show的值为true后,v-if指令就会触发显示,反之v-else指令就会消失了,如下图:

===========================================================

v-else-if指令:

注意:同样的v-else-if需要和v-if和v-else一起连着用

//因为show的值设置为true,所以v-if指令会显示(This is A),如下图:

//当修改show的值后,v-if指令就没有被显示了,如下图:  (修改show的值为b后,v-else-if指令就会显示出来;修改show的值为c后,v-else指令就会显示出来)

===========================================================

key值:

编写新的Demo,代码如下:

//运行代码效果如下:

//当把true的值设置为true,页面中会把邮箱名更改为用户名,但是表单(input)中的内容却没有清空。因为,Vue在重新渲染页面的时候,会尽量尝试去复用页面上已经存在的DOM。(即:当显示邮箱名的时候,已经有了一个input,当切换修改成用户名的时候,vue会发现以前页面上也有一个input,所以它的机制会尽量帮助我们复用页面上的DOM,它会尝试去复用input,而我们发现input是被复用了,但是input里面的内容却没有自动的清空)。所以为了解决这个效果,需要运用到 “key值”

//添加key值,代码如下:

//运行代码后,效果如下:

//解释:当给某个元素标签一个key值,Vue会知道它是页面上唯一的元素,如果两个的key值不一样,就不会去尝试复用以前的input标签了,这是Vue中虚拟DOM的一个div算法里面用到的内容

3-6 Vue中的条件渲染的更多相关文章

  1. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  2. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  3. 【译】在React中实现条件渲染的7种方法

    原文地址:https://scotch.io/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications 借助R ...

  4. 3-7 Vue中的列表渲染

     举个案例:循环data中的list的值在div中,并显示相应的index值. 关于数组的循环: //显示效果如下图: //一般的列表渲染最好带一个key值,要把key值设置为唯一值的话,可以选择in ...

  5. vue中的页面渲染方案

    一.模板渲染 <div id="J_render_app"> <ul v-if="items.length"> <li v-for ...

  6. vue中在页面渲染完之后获取元素(否则动态渲染的元素获取不到)

    两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...

  7. vue中异步请求渲染问题(swiper不轮播)(在开发过程中遇到过什么问题、踩过的坑)

    问题描述: 用vue封装一个swiper组件的时候,发现轮播图不能轮播了. 原因: 异步请求的时间远大于生命周期执行的时间,mounted初始化DOM时数据未返回,渲染数据是空数组,导致轮播图的容器层 ...

  8. Vue指令之条件渲染

    1. v-show 根据表达式的真假值,切换元素的 display CSS属性.表达式为false时,p标签被赋予 style="display:none;" <p v-sh ...

  9. Vue基础系列(五)——Vue中的指令(中)

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

随机推荐

  1. Java的基本概念

    JAVA的方法签名是 参数类型,参数个数,参数顺序,不包括返回值和访问修饰符. 对象序列化:将一个对象编码成一个字节流.

  2. CF 371C-Hamburgers[二分答案]

    C. Hamburgers time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  3. C#下搭建文件格式转换服务器

    文件格式转换,相信很多涉及到office文档在线观看的都会需要,因为浏览器还不能完全支持直接打开office文档,所以很多情况下我们都需要将这些文档转换成flash能够播放的格式,但是另一个问题又来了 ...

  4. 重载 &amp;&amp; 重载递增递和减运算符

    class Rule { private: double m_Length; public: explicit Rule(double lg = 1.0) :m_Length{ lg }{} Rule ...

  5. setObject:forKey和setValue:forKey的区别

    setObject:forKey: 是NSMutableDictionary类的方法                              key参数类型可以是任意类型对象             ...

  6. Fastadmin安装以及各种问题解决

    FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架 https://www.fastadmin.net/ 参照官方文档安装,还是有坑的 首先注意:无需下载PHP.Th ...

  7. [官网]Linux版本历史

    This is a list of links to every changelog. https://kernelnewbies.org/LinuxVersions 总结一下 2.6.x 存在了八年 ...

  8. 洛谷P1582 倒水题解

    题目 分析 这个题并不难,只是需要仔细思考我们首先可以很轻松的把这个题给疏通一下题意. 1:首先我们最后每个瓶子中装的水一定是一个$2^x$,因为每次都是$2$倍的加,这个应该很好理解. 2:我们要明 ...

  9. 爬取 Caused by SSLError(SSLError(&quot;bad handshake: Error

    在爬虫中遇到如下报错: Traceback (most recent call last): File "C:/Users/xuchunlin/PycharmProjects/A9_25/h ...

  10. git push -f

    有的时候使用GIT工作时,会遇到一下这种问题, Pushing to git@github.com:519ebayproject/519ebayproject.git To git@github.co ...