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. Qemu-KVM基本工作原理介绍

    本文分享自天翼云开发者社区<Qemu-KVM基本工作原理介绍>,作者:郑****文 1.KVM与Qemu关系 Qemu本身并不是KVM的一部分,而是一整套完整的虚拟化解决方案,它是纯软件实 ...

  2. 云内GSLB技术及应用场景

    本文分享自天翼云开发者社区<云内GSLB技术及应用场景>,作者:c****n 云业务容灾建设节奏一般是同城双活-异地双活-两地三中心(同城双活+异地多活),因为要解决的问题的复杂度和难度也 ...

  3. Linux 部署Pikachu靶场

    Linux 部署Pikachu靶场 环境部署 安装httpd及其相关的组件 yum install -y httpd httpd-devel 安装php及其相关组件 yum -y install ph ...

  4. 问题-ifconfig

    在运行centos7 运行ifconfig命令时出现: [root@kvm1 ~]# ifconfig -bash: ifconfig: command not found 原来是这样: 1.ifco ...

  5. [TJOI/HEOI2016] 求和 题解

    为什么又是佳媛姐姐啊啊啊! 斯特林数在这道题中不好处理,直接拆开: \[f(n)=\sum_{i=0}^n\sum_{j=0}^i\begin{Bmatrix}i\\j\end{Bmatrix}2^j ...

  6. mysql数据库表如何设计

    单表数据量 所有表都需要添加注释,数据量建议控制在3000万以内 不保存大字段数据 不在数据库中存储图片.文件等大数据 表使用规范 拆分大字段和访问频率低的字段,分离冷热数据 单表字段数控制在 20 ...

  7. 终于写完轮子一部分：tcp代理 了，记录一下

    24年终自己立了flag: 25年做些轮子玩(用于浪费生命,赚不了钱) 所以25年就准备用c#写一个网络代理NZOrz(nginx知道吧,就那玩意儿干的事),包含 udp/tcp/http1 2 3, ...

  8. abaqus&FEA资料-科研&工具-导航

    复合材料力学 BLOGs上的书籍共享文件夹 2004-Mechanics of Composite Structural Elements.pdf,onedrive link Mechanics Of ...

  9. 使用word模板的科研论文编写

    编写SCD论文等的时候,可能出现官网的论文模板不够全面.一般我们使用latex作为论文编写模板,格式等都方便控制和编写,而word模板操作起来较为复杂.但是官网有些时候可能找不到latex的模板内容, ...

  10. docker Get "https://registry-1.docker.io/v2/": x509: certificate is valid for

    前言 docker 在进行 build 时,报错:Get "https://registry-1.docker.io/v2/": x509: certificate is vali ...