Vue——条件渲染

v-if、v-else-if、v-else

  1. v-if 指令用于条件性地渲染一块内容，表达式的值为

    • true ——渲染。
    • false——不渲染

  2. 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管理可复用的元素

    背景：

    1. 因为从性能方向考虑，Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染
    2. 但是很多场景我们想让Vue去区分开这些相同类型的参数，所以我们采用key去标识，让Vue能够区分

​ Vue的渲染机制：

当我们在切换填写内容时，输入框里的内容没有变，这就是因为Vue复用了原有的input框，没有对这两个input框做区分，现在我们通过key来标记区分

应用场景：

  1. 表单填写，如上述示例
  2. 循环元素时对元素进行不复用标记(与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>

结果如图：

注意：

  1. v-for遍历的出来的不是数据，而是元素
  2. 如果使用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(六)——条件渲染的更多相关文章

  1. 第六十三篇：Vue的条件渲染与列表渲染

    好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...

  2. vue笔记-条件渲染

    条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...

  3. vue的条件渲染和列表渲染介绍

    一.条件渲染 1.v-if语句 <div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素的指令 --> ...

  4. 前端框架之Vue(5)-条件渲染

    v-if 在字符串模板中,比如 Django Template语法中,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {%if 1%} <h1>Yes ...

  5. vue基础——条件渲染

    一.v-if 1.1.v-if,v-else 在字符串模板中,比如Handlebars,我们得像这样写一个条件块: HTML <!-- Handlebars 模板 --> {{#if ok ...

  6. Vue v-if条件渲染

    1.简单的v-if指令,代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  7. vue基础---条件渲染

    (1)v-if条件渲染 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. 可以用 v-else 添加一个“else 块”: ①表达式 <di ...

  8. VUE：条件渲染和列表渲染

    条件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  9. vue.js条件渲染 v-if else-if v-for

    v-if: 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: {{#if ok}} <!-- Handlebars 模板 --> <h1>Yes</ ...

  10. Vue.js 条件渲染 v-if、v-show、v-else

    v-if  v-if 完全根据表达式的值在DOM中生成或移除一个元素.如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除:否则,对应元素的一个克隆将被重新插入DOM中. 1 2 3 ...

随机推荐

  1. 正权图的 Dijkstra 最短路算法

    最短路径问题是图论中最经典且重要的应用问题之一.它的目标是找到一个图中从起点到终点的最短路径,即在所有可能的路径中,选择一条边权和最小的路径.该问题广泛存在于多个实际场景中,比如交通运输.通信网络.导 ...

  2. 多项式算法再探：FMT 和 FWT

    我们知道,FFT 和 NTT 可以用来解决下面这种问题: \[c_k=\sum_{i+j=k}a_ib_j \] 不过,这并不是卷积的全部形态,比如下面这种: \[c_k=\sum_{i*j=k}a_ ...

  3. vue element-ui resetForm()表单重置的问题

  4. java list集合去重的两种方式

  5. Zookeeper - 本地模式部署

    本地模式部署 zoo.cfg 参数解析 本地模式部署 1.上传zookeeper的安装包并解压 tar -zxvf zookeeper-x.x.x.tar.gz -c /xxx/xxx/ 2.将 zo ...

  6. 2024NOIP邮寄

    渺渺兮身外无物,无喜无悲无怖,不过是大梦一场,各自沉浮. 前言 原计划这篇游记兼总结是在考完后一天之内写出来(12.1 前),但是一方面是因为家里的笔记本插上 U 盘写不了东西,一方面是这次 NOIP ...

  7. CF1793E题解

    \(\text{Problem - 1793E - Codeforces}\) \(\text{*2600}\) 备注 2024.10.19 考试 T2.考场未能想出正解,找到性质但没有根据性质往 d ...

  8. Loongson Log

    就看看能坚持多久吧 22/2/2及以前: 参照想象中的p7内容增添部分版CP0.部分中断/异常机制: 改sram接口:查阅文档func_test.sram相关内容:查阅vivado bram IP核相 ...

  9. docker login harbor x509: certificate signed by unknown authority

    前言 docker login harbor x509: certificate signed by unknown authority 解决 打开 /etc/docker/daemon.json,如 ...

  10. Hack The Box-代理连接及靶机-Meow-喵呜

    前言 ​ 在第一层,您将获得网络安全渗透测试领域的基本技能.您将首先学习如何匿名连接到各种服务,例如 FTP.SMB.Telnet.Rsync 和 RDP.接下来,您将发现 Nmap 的强大功能,这是 ...