ArcherWong博客
首页
博客
vue笔记3-vue条件渲染
作者:ArcherWong
分类:vue
时间:2019-01-04 10:38:16
阅读:11
# 1. v-if 实例 1. 基本使用 <h1 v-if="ok">Yes</h1> 2. 如果想切换多个元素,可以使用template元素,渲染结构不包含template元素 ``` <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> ``` 3. 使用else ``` <div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div> ``` 4. 使用v-else-if ``` <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> ``` # 2. 使用key管理可复用元素 不使用key,当切换登陆方式时候,input框中已经输入的内容不会变,只是placeholder中内容改变,这是因为两个模板使用了相同的元素,所以会复用,vue这样做是为了高效的渲染元素 ``` <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的情况下,每次切换时,input输入框都将被重新渲染,<label> 元素仍然会被高效地复用,因为它们没有添加 key 属性 ``` <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> ``` # 3. v-show v-show切换元素的css属性 display <h1 v-show="ok">Hello!</h1> # 4. v-if vs v-show v-if 切换过程中条件块内的事件监听器和子组件适当地被销毁和重建,如果初始条件为假,则什么都不做,知道变为真时,才会开始渲染条件块 v-show 不管初始条件是什么,元素总会被渲染,只是简单基于css切换 根据条件灵活的选用 # 5. 注意 v-show 不支持 <template> 元素,也不支持 v-else 当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。
标签:
上一篇:
vue笔记5-class与style绑定
下一篇:
vue笔记4-vue列表渲染
文章分类
css
elasticsearch
git
golang
guacamole
javascript
letsencrypt
linux
nginx
other
php
python
vue
web
阅读排行
编码总结
详解网络连接
tcpdump使用
JWT
websocket协议
友情链接
node文件
laravel-vue
ArcherWong的博客园