v-if/v-show -- 显示隐藏 · Vue&&TypeSprict--基础总结

[TOC] >[success] # v-if /v-show -- 真显示 ~~~ 1.v-if 的特点：每次都会重新删除或创建元素("条件块内的事件监听器和子组件适当地被销毁和重建"), v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块 2.v-show 的特点：不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换 , 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 3.v-if 有较高的切换性能消耗 4.v-show 有较高的初始渲染消耗(不管真假都创建。v-if 只有真才创建) 5. 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show 6. 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if ~~~ >[info] ## v-if 真显示 ~~~ 1.v-if 条件为真则显示 2.在 '<template>' 元素上配合 v-if 使用的好处，就是可以将'<template>'作为一个整体，且渲染的时候不显示'<template>' 3.'v-if' 配合'v-else' 使用 4.'v-if' 配合'v-else-if' 和 'v-else' 使用 ~~~ >[danger] ##### 综合案例 ![](https://box.kancloud.cn/22a50e5b286cd58be46907519772ee33_301x115.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <p v-if="msg==1">1</p> <p v-else-if="msg==2">2</p> <p v-else="msg==3">3</p> <input v-model="pushArray"> <button @click="changeMsg">提交</button> </div> <script> var vm = new Vue({ el: '#app', data: { pushArray:'', msg:1, }, methods:{ changeMsg(){ this.msg = this.pushArray; } } }); </script> </body> </html> ~~~ >[danger] ##### vue 文档中对 v-if 和 key的联合使用说明 ~~~ 1.下面代码的问题就是在input 输入内容后，切换后input中的内容依旧存在，出现这种问题通过上个章节中的第一个图解可以很好解释，这种情况下dom是不会重新渲染的 ~~~ ![](https://img.kancloud.cn/f7/f4/f7f443d80cbd748d226fbc71370da03a_1228x517.png) ~~~ html <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </template> ~~~ * 解决加一个key ~~~ 1.这里要注意的是为什么单独给input 加key，原因为了让<label> 元素仍然会被高效地复用 ~~~ ~~~ <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template> ~~~ >[info] ## v-show ~~~ 1.真显示，v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 ~~~ >[danger] ##### 案例 ~~~ <p v-show="msg==3">3</p> ~~~ >[danger] ##### 注意 ~~~ 1.注意，v-show 不支持 <template> 元素，也不支持 v-else。 ~~~ >[info] ## v-if 和 v-for ~~~ 1.当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级,下面的案例会先循环后if判断 <li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li> ~~~