VUE学习-条件渲染
2024-09-18 18:04:51
条件渲染
v-if & v-else-if & v-else
<div id="app">
<h1 v-if="type == 'VUE'">Vue is awesome!</h1>
<h1 v-if="type == 'HTML'">Vue is awesome!</h1>
<h1 v-else>Oh no </h1>
</div>
<script>
new Vue({
el: '#app',
data:{type:'HTML'}
})
</script>
用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>
<input type="button" @click="loginType == 'username'? 'email':'username'"/>
需添加一个具有唯一值的 key attribute。这样每次切换时,输入框都将被重新渲染。保证清除用户已经输入的内容。
v-show
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div>
<script>
new Vue({
el:'#app',
data:{ok:true}
})
</script>
v-if & v-show
- v-if 是在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show 只是简单地切换元素的 CSS property display。
- v-if 支持
<template>
元素。v-show 不支持<template>
元素。 - v-if 有更高的切换开销。而 v-show 有更高的初始渲染开销。
如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
最新文章
- 启动/关闭oracle服务有三种方式
- [BZOJ2438]杀人游戏(缩点+特判)
- Hibernate4Maven
- centos同步北京时间
- 在将 varchar 值 &#39;1,2,3,4,5,6,7,8&#39; 转换成数据类型 int 时失败。
- 【转】MYSQL入门学习之七:MYSQL常用函数
- RedHat Install
- java_java 利用JAX-RS快速开发RESTful 服务
- HTML5游戏开发引擎Pixi.js完全入门手册(一)框架简介及框架结构分析,作者思路剖析
- 剖析Prometheus的内部存储机制
- bzoj 3195 奇怪的道路 状压dp
- python下selenium自动化测试自我实践
- Orchard Core 增加了一个API模块,要怎么调用
- 如何统计NFS的client在一段时间内收到了多少个字节?
- Lucene增删改查
- View Pi's Status on WebBrowser
- css实现视觉差的滚动
- Pandas数据结构
- spark UDAF
- Eclipse关联tomcat
热门文章
- Hive详解(04) - hive函数的使用
- 实操记录之-----Ant Design of Vue 增强版动态合并单元格,自动根据数据进行合并,可自定义横纵向合并
- HelloWorld程序的代码编写-Hello World的编译运行
- IOS(XCode)嵌入Unity模块
- 艰难的 debug 经历,vscode 无法获取远程环境 ssh 报错,windows 11 ssh
- ES的数据结构
- windows环境下安装es和kibana
- 多功能游戏工具箱 - Watt Toolkit V4.4
- 使用 DirectSound 播放 WAV 文件
- 30道四则运算java