Vue(六)——条件渲染
Vue——条件渲染
v-if、v-else-if、v-else
v-if指令用于条件性地渲染一块内容，表达式的值为- true ——渲染。
- false——不渲染
v-if、v-else-if、v-else可以形成判断链联用
<!-- if、else-if、else -->
<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-if="type==='D'">D</div>
<div v-else>NOT A/B/C</div>
数据：
data:{
type:"Y",
}
结果打印：
NOT A/B/C data:{
type:"B",
}
结果打印：
B
key管理可复用的元素
背景：
- 因为从性能方向考虑，Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染
- 但是很多场景我们想让Vue去区分开这些相同类型的参数，所以我们采用key去标识，让Vue能够区分
Vue的渲染机制：
当我们在切换填写内容时，输入框里的内容没有变，这就是因为Vue复用了原有的input框，没有对这两个input框做区分，现在我们通过key来标记区分
应用场景：
- 表单填写，如上述示例
- 循环元素时对元素进行不复用标记(与v-for联用)
v-for 循环元素
应用范围：
- 循环数组
- 循环对象
- 循环json
- 遍历整数
语法：
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
Demo：
<body>
<div id="app">
<!-- 对对象遍历 -->
<ul>
<li v-for="(item,index) in obj" :key="index">{{index}}-{{item}}</li>
</ul>
<!-- v-for对一组数据遍历渲染 -->
<ul>
<li v-for="(item,index) in anime" :key="index">{{item}}</li>
</ul>
<!-- 遍历json -->
<table border="" cellspacing="" cellpadding="">
<tr>
<th>姓名</th>
<th>年纪</th>
<th>性别</th>
</tr>
<tr v-for="(item,index) in team" :key="index">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
</tr>
</table>
<!-- 遍历整数-->
<span v-for="val in 10">{{val}}</span>
<!-- 输出：
12345678910 -->
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
obj:{
name: '小明',
age: '17岁',
sex: '男',
},
anime: ['进击的巨人', '狐妖小红娘', '天宝伏妖录', '东京食尸鬼'],
team: [
{name:'张三',age: '17',sex:'男'},
{name:'李四',age: '18',sex:'女'},
{name:'王五',age: '19',sex:'男'},
{name:'赵六',age: '20',sex:'男'}
]
}
})
</script>
</body>
结果如图：
注意：
- v-for遍历的出来的不是数据，而是元素
- 如果使用item和index的时候一定要使用括号包裹起来
v-show
用于元素的显示/隐藏，当表达式为false时渲染的属性为display：none
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
注意，v-show 不支持 <template> 元素，也不支持 v-else。
v-if与v-show区别
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，
v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
选择
v-if有更高的切换开销，运行时条件很少改变，则使用v-if较好v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；
v-if 与 v-for 一起使用
不推荐同时使用 v-if 和 v-for。请查阅风格指南以获取更多信息。
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。请查阅列表渲染指南以获取详细信息。
Vue(六)——条件渲染的更多相关文章
- 第六十三篇：Vue的条件渲染与列表渲染
好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...
- vue笔记-条件渲染
条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...
- vue的条件渲染和列表渲染介绍
一.条件渲染 1.v-if语句 <div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素的指令 --> ...
- 前端框架之Vue(5)-条件渲染
v-if 在字符串模板中,比如 Django Template语法中,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {%if 1%} <h1>Yes ...
- vue基础——条件渲染
一.v-if 1.1.v-if,v-else 在字符串模板中,比如Handlebars,我们得像这样写一个条件块: HTML <!-- Handlebars 模板 --> {{#if ok ...
- Vue v-if条件渲染
1.简单的v-if指令,代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
- vue基础---条件渲染
(1)v-if条件渲染 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. 可以用 v-else 添加一个“else 块”: ①表达式 <di ...
- VUE：条件渲染和列表渲染
条件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- vue.js条件渲染 v-if else-if v-for
v-if: 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: {{#if ok}} <!-- Handlebars 模板 --> <h1>Yes</ ...
- Vue.js 条件渲染 v-if、v-show、v-else
v-if v-if 完全根据表达式的值在DOM中生成或移除一个元素.如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除:否则,对应元素的一个克隆将被重新插入DOM中. 1 2 3 ...
随机推荐
- EIP、VIP、RIP的区别
本文分享自天翼云开发者社区<EIP.VIP.RIP的区别>,作者:魏****猛 EIP.VIP.RIP都是网络中经常使用的术语,但是它们的意义和使用场景是不同的. 首先,EIP(Elast ...
- [车联网/计算机网络] Autosar 的 `ARXML` 配置数据库文件协议
序: 缘起 ARXML 概述 : Autosar 的 ARXML 配置数据库文件协议 ARXML 文件 ARXML文件: AUTOSAR系统描述文件,后缀*.arxml 实质是一个XML文件,一般通过 ...
- 库卡KUKA机器人KRC4伺服马达维修指导分析
通常情况下,库卡机器人伺服电机是实现机器人的关键组件,它提供了动力.位置和速度控制力和扭矩控制以及闭环控制等功能,使得库卡机器人能够在各种应用场景中发挥机器本身的性能. 一. 如果KUKA库卡机器人K ...
- 莫托曼机器人GP110B操作手柄故障维修全攻略
莫托曼机器人GP110B操作手柄故障机器人维修全攻略 一.前言 莫托曼机器人GP110B操作手柄是机器人控制系统的重要组成部分,它允许操作人员对机 ...
- 小米手机/红米手机解锁BL详细教程
由于MIUI解锁风控提升,全部小米默认为支持解锁BootLoader的 但需要登录小米账号后,到开发者选项将设备和账号绑定0-1000小时,一般默认为168小时,部分新机实际几百小时,具体绑定时间,我 ...
- 分块-byx
Update:2025.5.25 树状数组是基于二进制划分与倍增的思想,线段树基于分治的思想.之所以能够高效修改和查询,就是把序列分成了大大小小的"段",花费额外(增加空间,空间换 ...
- Flink运行时架构
一.运行时的组件和基本原理 1.作业管理器 (1)控制一个应用程序执行的主进程,也就是说,每个应用程序都会被一个不同的JobManager所控制执行. (2)JobManager会先接收到要执行的应用 ...
- 大数据之路Week08_day06 (Zookeeper初识）
让我们来回顾一下我们在学习Hadoop中的HDFS的时候,肯定见过下面这样的两幅图: 这副图代表着什么呢?它介绍的是Hadoop集群的高可靠,也就是前面提过的HA,仔细观察一下这副图,我们发现有两个N ...
- .NET 10 首个预览版发布，跨平台开发与性能全面提升
前言 2024年2月25日,微软正式推出 .NET 10 预览版 1,标志着这一跨平台开发框架迈入新里程碑. 本次更新聚焦 JIT 编译器优化.运行时性能提升和跨平台开发体验增强,同时引入多项开发者期 ...
- Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
#div_digg { float: right; font-size: 12px; margin: 10px; text-align: center; width: 120px; position: ...