【Vue】基础系列（五）--条件渲染( v-show和v-if)--列表渲染(v-for)--key的原理--列表过滤(watch和computed实现)--Vue监测数据改变的原理_html-js-css

5.1.条件渲染（v-show）

添加样式隐藏（display: none）

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
	
		
		<div id="root">
			<h1 v-show="true">欢迎来到{{name}}h1>

		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
				
			}
		})
	script>
html>

当把v-show改为false

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
	
		
		<div id="root">
			<h1 v-show="false">欢迎来到{{name}}h1>

		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
				
			}
		})
	script>
html>

5.2.条件渲染（v-if）

移除标签删除

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染v-iftitle>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
	
		
		<div id="root">
			<h1 v-if="false">欢迎来到{{name}}h1>

		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
				
			}
		})
	script>
html>

v-if 与v-else-if 使用
v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。（必须是一个整体）
下面以例子说明：

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染v-iftitle>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
	
		
		<div id="root">
			<h2>当前的n值是:{{n}}h2>
			<button @click="n++">点我n+1button>

			
			 <div v-if="n === 1">Angulardiv>
			 <div>打断div>
			<div v-else-if="n === 2">Reactdiv>
			<div v-else-if="n === 3">Vuediv>
			<div v-else>哈哈div> 

		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:0
			}
		})
	script>
html>

v-if与template的配合使用（v-show与template不能配合使用）
可以不破坏原来的结构

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染v-iftitle>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
	
		
		<div id="root">
			<h2>当前的n值是:{{n}}h2>
			<button @click="n++">点我n+1button>
			
			
			<template v-if="n === 1">
				<h2>你好h2>
				<h2>尚硅谷h2>
				<h2>北京h2>
			template>

		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:0
			}
		})
	script>
html>

总结
条件渲染：1.v-if
写法：
(1).v-if=“表达式”
(2).v-else-if=“表达式”
(3).v-else=“表达式”
适用于：切换频率较低的场景。(因为v-if是在 *** 作DOM节点)
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
2.v-show
写法：v-show=“表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注：使用v-if的时，元素可能无法获取到（因为结构都被删除了），而使用v-show（仅仅是样式上的隐藏，节点仍然在）一定可以获取到。

5.2.列表渲染（v-for） 5.2.1.列表渲染–遍历数组

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表渲染--遍历数组title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		<div id="root">
			
			<h2>人员列表（遍历数组）h2>
			<ul>
				<li v-for="(p,index) in persons" :key="p.id">
					{{p.name}}-{{p.age}}--{{index}}
				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}
					]
				}
			})
		script>
html>

5.2.2.列表渲染–遍历对象

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表渲染--遍历对象title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		<div id="root">
		
		<h2>汽车信息（遍历对象）h2>
		<ul>
			<li v-for="(value,k) of car" :key="k">
				{{k}}-{{value}}
			li>
		ul>

			
		div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					car:{
						name:'奥迪A8',
						price:'70万',
						color:'黑色'
					}
				}
			})
		script>
html>

5.2.3.列表渲染–遍历字符串（用得少）

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表渲染--遍历字符串title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		<div id="root">
			
			<h2>测试遍历字符串（用得少）h2>
			<ul>
				<li v-for="(char,index) of str" :key="index">
					{{char}}-{{index}}
				li>
			ul>

			
		div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					str:'hello'
				}
			})
		script>
html>

5.2.4.列表渲染–遍历指定次数（用得少）

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表渲染--遍历指定次数title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		<div id="root">
			
			<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:{
					
				}
			})
		script>
html>

总结
v-for指令:
1.用于展示列表数据
2.语法：v-for=“(item, index) in xxx” :key=“yyy”
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

数组: (item, index)对象: (value, key)字符串：(char, index)数字：(number, index) 5.3. key的原理

5.3.1.使用index 作为key时，出现的问题

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>key的原理title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		
		<div id="root">
			
			<h2>人员列表（遍历数组）h2>
			<button @click.once="add">添加一个老刘button>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
					<input type="text">
				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}
					]
				},
				methods: {
					add(){
						const p = {id:'004',name:'老刘',age:40}
						this.persons.unshift(p)
					}
				},
			})
		script>
html>

5.3.2.遍历列表时index 作为key

5.3.2.遍历列表时id 作为key

张天禹老师视频讲解：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=30&spm_id_from=pageDriver

用index作为key可能会引发的问题：
1. 若对数据进行：逆序添加、逆序删除等破坏顺序 *** 作（如上面往头头那里添加数据，往最后面添加就没有这个问题）:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低（效率低体现在，旧的真实DOM很少复用）。
2. 如果结构中还包含输入类的DOM(如上面的input输入框)：
会产生错误DOM更新 ==> 界面有问题。

面试题：React（注意在React中key是必须要写的，不写就报错）、Vue中的key有什么作用？（key的内部原理）
					
					1. 虚拟DOM中key的作用：
									key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 
									随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
									
					2.对比规则：
								(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
											①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
											②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

								(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
											创建新的真实DOM，随后渲染到到页面。
											
					3. 用index作为key可能会引发的问题：
										1. 若对数据进行：逆序添加、逆序删除等破坏顺序 *** 作:
														会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

										2. 如果结构中还包含输入类的DOM：
														会产生错误DOM更新 ==> 界面有问题。

					4. 开发中如何选择key?:
										1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份z号、学号等唯一值。
										2.如果不存在对数据的逆序添加、逆序删除等破坏顺序 *** 作，仅用于渲染列表用于展示，
											使用index作为key是没有问题的。

5.4.列表过滤–watch实现模糊搜索

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表过滤--watch实现title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		<div id="root">
			<h2>人员列表h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				li>
			ul>
		div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			//用watch实现
			 new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					],
					filPerons:[]
				},
				watch:{
					keyWord:{
						immediate:true,//立即执行watch，作用是为了实现 一上来就使用空字符串去查询并返回结果
						handler(val){
							//filter 需要使用return 返回新数组，且不影响原数组的数据
							//使用filPersons来接收模糊搜索后的结果
							this.filPerons = this.persons.filter((p)=>{ 
								return p.name.indexOf(val) !== -1  //不等于-1是匹配上的
							})
						}
					}
				}
			}) 
			
		script>
html>

5.5.列表过滤–computed（计算属性）实现模糊搜索

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表过滤--computed实现title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		<div id="root">
			<h2>人员列表h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				li>
			ul>
		div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
				//用computed实现
				new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}
			}) 
			
		script>
html>

5.6.列表排序–computed（计算属性）实现

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表排序title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		<div id="root">
			<h2>人员列表h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<button @click="sortType = 2">年龄升序button>
			<button @click="sortType = 1">年龄降序button>
			<button @click="sortType = 0">原顺序button>
			<ul>
				<li v-for="(p,index) of filPerons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
					<input type="text">
				li>
			ul>
		div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					sortType:0, //0原顺序 1降序 2升序
					persons:[
						{id:'001',name:'马冬梅',age:30,sex:'女'},
						{id:'002',name:'周冬雨',age:31,sex:'女'},
						{id:'003',name:'周杰伦',age:18,sex:'男'},
						{id:'004',name:'温兆伦',age:19,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						const arr = this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
						//判断一下是否需要排序
						if(this.sortType){//传入的值为1或者2 都为true 等同 if(this.sortType !== 0)
							arr.sort((p1,p2)=>{//arr.sort()是改变原数组的，对原数组进行排序 p1-p2升序，p2-p1降序
								return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
							})
						}
						return arr //将排好序的数组返回
					}
				}
			}) 

		script>
html>

5.7.vue更新数据时的一个问题 5.7.1.奏效更新

方式一：

 methods: {
	updateMei(){
	 this.persons[0].name = '马老师' //奏效
	 this.persons[0].age = 50 //奏效
	 this.persons[0].sex = '男' //奏效
		}
	}

方式二：

 methods: {
	updateMei(){
	//从索引0开始添加，删除1个元素，并把元素替换为{id:'001',name:'马老师',age:50,sex:'男'}
	 this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})//奏效
		}
	}

5.7.2.不奏效更新

 methods: {
	updateMei(){
	 this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
		}
	}

5.7.3.Vue监测数据改变的原理_对象

Vue监测数据改变的原理就是通过调用setter对页面重新解析，所以需要对data进行加工处理，从data 变成vm._data 大概是经过了下面图片中的两步

5.8.模拟一个数据监测

模拟的数据监测和vue 相比的缺陷：
1.只能实现一层对象的getter和setter，而vue可以实现只有是对象，都会有getter和setter
2.如上图所示，只能这样修改数据vm._data.address=‘atgugui’，而 vue可以vm._data.address='atgugui’或者vm.address=‘atgugui’ 来达到修改数据

5.9.Vue.set的使用(vm.$set)

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>8.Vue.set的使用title>
		
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		<div id="root">
			<h1>学校信息h1>
			<h2>学校名称：{{school.name}}h2>
			<h2>学校地址：{{school.address}}h2>
			<h2>校长是：{{school.leader}}h2>
			<hr/>
			<h1>学生信息h1>
			<button @click="addSex">添加一个性别属性，默认值是男button>
			<h2>姓名：{{student.name}}h2>
			<h2 v-if="student.sex">性别：{{student.sex}}h2>
			<h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}h2>
			<h2>朋友们h2>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				li>
			ul>
		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				school:{
					name:'尚硅谷',
					address:'北京',
				},
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			}
		})
	script>
html>

5.10.Vue监测数据改变的原理_数组

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理_数组title>
		
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		<div id="root">
			<h1>学生信息h1>
			<button @click="addSex">添加一个性别属性，默认值是男button>
			<h2>姓名：{{student.name}}h2>
			<h2 v-if="student.sex">性别：{{student.sex}}h2>
			<h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}h2>
			<h2>爱好h2>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				li>
			ul>
			<h2>朋友们h2>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				li>
			ul>
		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			}
		})
	script>
html>

这样在调用这7个方法，就可以在页面上看到动态更新的效果了

使用Vue.set 也可以达到修改数组的效果

5.11.总结数据监视

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>总结数据监视title>
		<style>
			button{
				margin-top: 10px;
			}
		style>
		
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>			
		
		<div id="root">
			<h1>学生信息h1>
			<button @click="student.age++">年龄+1岁button> <br/>
			<button @click="addSex">添加性别属性，默认值：男button> <br/>
			<button @click="student.sex = '未知' ">修改性别button> <br/>
			<button @click="addFriend">在列表首位添加一个朋友button> <br/>
			<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三button> <br/>
			<button @click="addHobby">添加一个爱好button> <br/>
			<button @click="updateHobby">修改第一个爱好为：开车button> <br/>
			<button @click="removeSmoke">过滤掉爱好中的抽烟button> <br/>
			<h3>姓名：{{student.name}}h3>
			<h3>年龄：{{student.age}}h3>
			<h3 v-if="student.sex">性别：{{student.sex}}h3>
			<h3>爱好：h3>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				li>
			ul>
			<h3>朋友们：h3>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				li>
			ul>
		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				student:{
					name:'tom',
					age:18,
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				},
				addFriend(){
					this.student.friends.unshift({name:'jack',age:70})
				},
				updateFirstFriendName(){
					this.student.friends[0].name = '张三'
				},
				addHobby(){
					this.student.hobby.push('学习')
				},
				updateHobby(){
					// this.student.hobby.splice(0,1,'开车')
					// Vue.set(this.student.hobby,0,'开车')
					this.$set(this.student.hobby,0,'开车')
				},
				removeSmoke(){
					this.student.hobby = this.student.hobby.filter((h)=>{
						return h !== '抽烟'
					})
				}
			}
		})
	script>
html>

Vue监视数据的原理：
1. vue会监视data中所有层次的数据。
2. 如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
3. 如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据(即 vm._data)对象 添加属性！！！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1296202.html

【Vue】基础系列（五）--条件渲染( v-show和v-if)--列表渲染(v-for)--key的原理--列表过滤(watch和computed实现)--Vue监测数据改变的原理

发表评论

评论列表（0条）