Vue条件渲染和列表渲染

若年封尘
146 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

条件渲染v-if，v-show

1.v-if 写法：

(1).v-if="表达式"

(2).v-else-if="表达式"

(3).v-else="表达式" 适用于：切换频率较低的场景；不展示的DOM元素直接被移除。 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”，即中间不能插入其它东西。

2.v-show 写法：

v-show="表达式"

适用于：切换频率较高的场景；不展示的DOM元素未被移除，仅仅是使用样式隐藏掉 3.备注：使用v-if的时，元素可能无法获取到(因为DOM可能被删)，而使用v-show一定可以获取到。

v-if与template的配合使用：template不会破坏结构，DOM中只会显示3个h2。注意它不能与v-show配合

<template v-if="1 === 1">
	<h2>你好</h2>
	<h2>尚硅谷</h2>
	<h2>北京</h2>
</template>

列表渲染v-for

1.用于展示列表数据 2.语法：v-for="(item, index) in xxx" :key="yyy"，其中in可换成of，:key可省略。 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）。

<div id="root">
	<!-- 遍历数组 -->
	<h2>人员列表（遍历数组）</h2>
	<button @click.once="add">添加一个老刘</button>
	<ul>
		<li v-for="(p,index) of persons" :key="index">
			{{p.name}}-{{p.age}}
		</li>
	</ul>

	<!-- 遍历对象 -->
	<h2>汽车信息（遍历对象）</h2>
	<ul>
		<li v-for="(value,k) of car" :key="k">
			{{k}}-{{value}}
		</li>
	</ul>

	<!-- 遍历字符串 -->
	<h2>测试遍历字符串（用得少）</h2>
	<ul>
		<li v-for="(char,index) of str" :key="index">
			{{char}}-{{index}}
		</li>
	</ul>
	
	<!-- 遍历指定次数 -->
	<h2>测试遍历指定次数（用得少）</h2>
	<ul>
		<li v-for="(number,index) of 5" :key="index">
			{{index}}-{{number}}
		</li>
	</ul>
</div>

<script type="text/javascript">
	Vue.config.productionTip = false
	
	new Vue({
		el:'#root',
		data:{
			persons:[
				{id:'001',name:'张三',age:18},
				{id:'002',name:'李四',age:19},
				{id:'003',name:'王五',age:20}
			],
			car:{
				name:'奥迪A8',
				price:'70万',
				color:'黑色'
			},
			str:'hello'
		}
		methods: {
			add(){
				const p = {id:'004',name:'老刘',age:40}
				this.persons.unshift(p)
			}
		},
	})
</script>

key的内部原理

  • 虚拟DOM中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： (1).旧虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 (2).旧虚拟DOM中未找到与新虚拟DOM相同的key： 创建新的真实DOM，随后渲染到到页面。
  • 用index作为key可能会引发的问题： 1.若对数据进行：逆序添加unshift()、逆序删除等破坏顺序操作:,会产生没有必要的真实DOM更新： 界面效果没问题, 但效率低。 2.如果结构中还包含输入类的DOM：会产生错误DOM更新：界面有问题。
  • 开发中如何选择key?: 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等=一值。

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示， 使用index作为key是没有问题的。

avatar
文章
阅读
粉丝