5、条件渲染
来源:互联网 发布:默纳克调试软件下载 编辑:程序博客网 时间:2024/06/05 15:10
title: 5、条件渲染
date: 2017-07-31 19:50:10
tags: vue笔记(妙味)
v-if
在vue中使用v-if
实现判断
<h1 v-if="ok">Yes</h1><h1 v-else>No</h1>
上面这种方式只能给一个元素判断,如果是多个元素可以按照下面的写法,<template>
元素当做包装元素,但是最终渲染不会包含这个元素。
<template v-if="ok"> <h1>title</h1> <p>paragraph 1</p> <p>paragraph 2</p></template>
v-else
或者v-else-if
必须跟在v-if
或者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>
htnmlvar vm = new Vue({ var vm = new Vue({ el:'#app', data: { // 只打印No和C ok: false, type: 'C' }})
用key管理可复用元素
这里虽然可以切换输入用户名和email,但是每次切换之后input
输入的内容是不变的,改变的只是placeholder
的内容,也就是说这两个input
元素并不是相互独立的
<template v-if="loginType === 'username'"> <label for="">Username</label> <input type="text" placeholder="Enter your username"></template><template v-else> <label for="">Email</label> <input type="text" placeholder="Enter you mail address"></template>
有时这样会比较麻烦,所以Vue提供了一种方式来声明这两个元素是完全独立的,不要复用他们,只需要添加一个具有唯一的key
属性即可
<template v-if="loginType === 'username'"> <label for="">Username</label> <input type="text" placeholder="Enter your username" key="username-input"></template><template v-else> <label for="">Email</label> <input type="text" placeholder="Enter your email" key="email-input"></template>
v-show
另一个用于根据条件展示元素的是v-show
指令,用法大致一样
<h1 v-show="ok">Hello!</h1>
show不支持<template>
语法,而且v-show
的元素始终会被渲染并保留在DOM中,v-show
只是简单的切换元素的display
属性。
v-if和v-show比较
v-if
是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建。v-if
也是有惰性的,如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件。相比之下,
v-show
就简单得多,不管初始条件是什么,元素总是会被渲染,并且只是简单的基于css
进行切换。一般来说,
v-if
有更高的切换开销,而v-show
有更高的初始渲染开销,因此,如果需要非常频繁的切换,则使用v-show
比较好,如果运行时条件不太可能改变,则使用v-if
比较好。
阅读全文
0 0
- 5、条件渲染
- 条件渲染
- Vue.js教程5-条件渲染
- vue条件渲染
- vue笔记---条件渲染
- react-bits:条件渲染
- Vue的条件渲染
- Vue-条件渲染
- vue.js条件渲染
- react条件渲染
- 小程序 条件渲染
- React中的条件渲染
- React 条件渲染 if
- 微信小程序条件渲染
- 【Vue】 -(6) 条件渲染和列表渲染
- Vue.js笔记-条件渲染 列表渲染
- 微信小程序的条件渲染
- vue标签属性条件渲染
- maven连接国内仓库setting设置
- 《锋利的jQuery》十一、jQuery性能优化
- oracle中dblink的使用简介
- 《锋利的jQuery》十二、jQuery的技巧
- Oracle生成日期维度表
- 5、条件渲染
- RPC
- Mybatis MapperScannerConfigurer 自动扫描 将Mapper接口生成代理注入到Spring
- 《锋利的jQuery》九、$.ajax()的方法
- MySQL--SQL语句的分类
- 《锋利的jQuery》十三、jQuery加载并解析XML
- java String和byte[]转换(包括16进制String和byte[]转换)
- 工作流部署
- Java集合源码剖析汇总