09-22Vue的学习

key的原理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>key的原理</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<ul>
				<li v-for="u in userList" :key="u.id">
					姓名：{{u.name}} 年龄：{{u.age}}
					<input type="text" />
				</li>
			</ul>
			<button type="button" @click="addUser">添加数据</button>
		</div>
		<script>
			//在做列表渲染的时候一定要加上:key 否者数据发生改变时，样式会错位。
			//key一般使用数据的id
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#box',
				data:{
					userList:[
						{id:'1001',name:'张三',age:18},
						{id:'1002',name:'李四',age:28},
						{id:'1003',name:'王五',age:38}
					]
				},
				methods:{
					addUser(){
						var u = {id:'1004',name:'赵六',age:48};
						//添加数据(前面追加)
						//this.userList.unshift(u);
						//添加数据(后面追加)
						this.userList.push(u);
					}
				}
			})
		</script>
	</body>
</html>

音乐搜索案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>音乐搜索案例</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			搜索: <input type="text" v-model="searchValue">
			<ul>
				<li v-for="m in searchList" :key="m.id">
					<div style='width:200px;float: left;'>
						音乐：{{m.name}}
					</div>
					<div style='width:200px;float: left;'>
						歌手：{{m.sname}}
					</div>
					
				</li>
			</ul>
		</div>
		<script>
			//在做列表渲染的时候一定要加上:key 否者数据发生改变时，样式会错位。
			//key一般使用数据的id
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#box',
				data:{
					searchValue:'',//用户搜索
					musicList:[],//数据
					searchList:[]//搜索结果
				}
			})
			
			vm.musicList = [
				{id:'1', name:'想唱就唱',sname:'张含韶'}
				,{id:'2', name:'冰点与沸点',sname:'张含韶'}
				,{id:'3', name:'夕阳无限好',sname:'陈奕迅'}
				,{id:'4', name:'爱的证明',sname:'沈建祥'}
				,{id:'5', name:'刻下纹身之后' ,sname:'小鸣'}
				,{id:'6', name:'双面人' ,sname:'伍佰'}
				,{id:'7', name:'长情' ,sname:'黎明'}
				,{id:'8', name:'我得你' ,sname:'张学友'}
				,{id:'9', name:'人人望放假' ,sname:'张学友'}
				,{id:'10', name:'太平洋的风' ,sname:'胡德夫'}
				,{id:'11', name:'吻下留人' ,sname:'许志安'}
				,{id:'12', name:'顺时针' ,sname:'梁咏琪'}
				,{id:'13', name:'回来我的爱' ,sname:'阳一'}
				,{id:'14', name:'两只蝴蝶' ,sname:'庞龙'}
				,{id:'15', name:'老鼠爱大米' ,sname:'杨臣刚'}
				,{id:'16', name:'丁香花' ,sname:'唐磊'}
				,{id:'17', name:'爱你' ,sname:'冷草莓'}
				,{id:'18', name:'美梦成真' ,sname:'冷草莓'}
				,{id:'19', name:'老鼠爱大米' ,sname:'huanggm2'}
				,{id:'20', name:'谢谢你的爱1999' ,sname:'cznana'}
				,{id:'21', name:'老鼠爱大米' ,sname:'英文版'}
				,{id:'22', name:'猪之歌' ,sname:'香香'}
				,{id:'23', name:'“吻别”英文版' ,sname:'Michael..'}
				,{id:'24', name:'别说我的眼泪你无..' ,sname:'东来东往'}
				,{id:'25', name:'追杀邱比特' ,sname:'蔡依林'}
				,{id:'26', name:'被风吹过的夏天' ,sname:'金莎'}
				,{id:'27', name:'你到底爱谁' ,sname:'刘嘉亮'}
				,{id:'28', name:'六月的雨' ,sname:'胡歌'}
				,{id:'29', name:'酸酸甜甜就是我' ,sname:'张含韵'}
				,{id:'30', name:'你好,周杰伦' ,sname:'安又淇'}
				,{id:'31', name:'江南' ,sname:'林俊杰'}
				,{id:'32', name:'情人' ,sname:'刀郎'}
				,{id:'33', name:'两只蝴蝶' ,sname:'庞龙'}
				,{id:'34', name:'2002年的第一场雪' ,sname:'刀郎'}
				,{id:'35', name:'看我七十二变' ,sname:'蔡依林'}
				,{id:'36', name:'恭喜发财' ,sname:'刘德华'}
				,{id:'37', name:'童话' ,sname:'光良'}
				,{id:'38', name:'寓言' ,sname:'张韶涵'}
				,{id:'39', name:'宁夏' ,sname:'梁静茹'}
				,{id:'40', name:'断点' ,sname:'张敬轩'}
				,{id:'41', name:'快乐崇拜' ,sname:'潘玮柏'}
				,{id:'42', name:'一首简单的歌' ,sname:'王力宏'}
				,{id:'43', name:'孤单北半球' ,sname:'欧得洋'}
				,{id:'44', name:'十年' ,sname:'陈奕迅'}
				,{id:'45', name:'男人海洋' ,sname:'周传雄'}
				,{id:'46', name:'挥着翅膀的女孩' ,sname:'容祖儿'}
				,{id:'47', name:'我们的爱' ,sname:'F.I.R'}
				,{id:'48', name:'第一次爱的人' ,sname:'王心凌'}
			];
			//监视属性
			vm.$watch('searchValue',function(nv){
				//console.log("用户搜索"+nv);
				//filter会把数据进行循环，如果为false则会移除数据，为true保留数据，最终返回一个集合。
				this.searchList = this.musicList.filter((p) => {//ES6
					if(p.name.indexOf(nv) !== -1){//包含
						return true;
					}else{
						return false;
					}
				});
			},{
				//初始化执行一次
				immediate:true,
			});
		</script>
	</body>
</html>

音乐播放案例（带排序）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>音乐搜索案例</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			搜索: <input type="text" v-model="searchValue">
			<button @click="sortType = !sortType">排序</button>
			<ul>
				<li v-for="m in searchList" :key="m.id">
					<div style='width:300px;float: left;'>
						ID :{{m.id}}音乐：{{m.name}}
					</div>
					<div style='width:300px;float: left;'>
						歌手：{{m.sname}}
					</div>
					
				</li>
			</ul>
		</div>
		<script>
			//在做列表渲染的时候一定要加上:key 否者数据发生改变时，样式会错位。
			//key一般使用数据的id
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#box',
				data:{
					searchValue:'',//用户搜索
					musicList:[],//数据
					searchList:[],//搜索结果
					sortType:true//true代表升序false代表降序
				}
			})
			
			vm.musicList = [
				{id:'1', name:'想唱就唱',sname:'张含韶'}
				,{id:'2', name:'冰点与沸点',sname:'张含韶'}
				,{id:'3', name:'夕阳无限好',sname:'陈奕迅'}
				,{id:'4', name:'爱的证明',sname:'沈建祥'}
				,{id:'5', name:'刻下纹身之后' ,sname:'小鸣'}
				,{id:'6', name:'双面人' ,sname:'伍佰'}
				,{id:'7', name:'长情' ,sname:'黎明'}
				,{id:'8', name:'我得你' ,sname:'张学友'}
				,{id:'9', name:'人人望放假' ,sname:'张学友'}
				,{id:'10', name:'太平洋的风' ,sname:'胡德夫'}
				,{id:'11', name:'吻下留人' ,sname:'许志安'}
				,{id:'12', name:'顺时针' ,sname:'梁咏琪'}
				,{id:'13', name:'回来我的爱' ,sname:'阳一'}
				,{id:'14', name:'两只蝴蝶' ,sname:'庞龙'}
				,{id:'15', name:'老鼠爱大米' ,sname:'杨臣刚'}
				,{id:'16', name:'丁香花' ,sname:'唐磊'}
				,{id:'17', name:'爱你' ,sname:'冷草莓'}
				,{id:'18', name:'美梦成真' ,sname:'冷草莓'}
				,{id:'19', name:'老鼠爱大米' ,sname:'huanggm2'}
				,{id:'20', name:'谢谢你的爱1999' ,sname:'cznana'}
				,{id:'21', name:'老鼠爱大米' ,sname:'英文版'}
				,{id:'22', name:'猪之歌' ,sname:'香香'}
				,{id:'23', name:'“吻别”英文版' ,sname:'Michael..'}
				,{id:'24', name:'别说我的眼泪你无..' ,sname:'东来东往'}
				,{id:'25', name:'追杀邱比特' ,sname:'蔡依林'}
				,{id:'26', name:'被风吹过的夏天' ,sname:'金莎'}
				,{id:'27', name:'你到底爱谁' ,sname:'刘嘉亮'}
				,{id:'28', name:'六月的雨' ,sname:'胡歌'}
				,{id:'29', name:'酸酸甜甜就是我' ,sname:'张含韵'}
				,{id:'30', name:'你好,周杰伦' ,sname:'安又淇'}
				,{id:'31', name:'江南' ,sname:'林俊杰'}
				,{id:'32', name:'情人' ,sname:'刀郎'}
				,{id:'33', name:'两只蝴蝶' ,sname:'庞龙'}
				,{id:'34', name:'2002年的第一场雪' ,sname:'刀郎'}
				,{id:'35', name:'看我七十二变' ,sname:'蔡依林'}
				,{id:'36', name:'恭喜发财' ,sname:'刘德华'}
				,{id:'37', name:'童话' ,sname:'光良'}
				,{id:'38', name:'寓言' ,sname:'张韶涵'}
				,{id:'39', name:'宁夏' ,sname:'梁静茹'}
				,{id:'40', name:'断点' ,sname:'张敬轩'}
				,{id:'41', name:'快乐崇拜' ,sname:'潘玮柏'}
				,{id:'42', name:'一首简单的歌' ,sname:'王力宏'}
				,{id:'43', name:'孤单北半球' ,sname:'欧得洋'}
				,{id:'44', name:'十年' ,sname:'陈奕迅'}
				,{id:'45', name:'男人海洋' ,sname:'周传雄'}
				,{id:'46', name:'挥着翅膀的女孩' ,sname:'容祖儿'}
				,{id:'47', name:'我们的爱' ,sname:'F.I.R'}
				,{id:'48', name:'第一次爱的人' ,sname:'王心凌'}
			];
			//监视属性
			vm.$watch('searchValue',function(nv){
				//console.log("用户搜索"+nv);
				//filter会把数据进行循环，如果为false则会移除数据，为true保留数据，最终返回一个集合。
				const arr = this.musicList.filter((p) => {//ES6
					if(p.name.indexOf(nv) !== -1 || p.sname.indexOf(nv) !== -1){//包含
						return true;
					}else{
						return false;
					}
				});
				
				//排序
				//sort如果返回p1-p2升序 如果返回p2-p1就是降序
				arr.sort((p1,p2) => {
					if(this.sortType){//升序
						return p1.id-p2.id;
					}else{//降序
						return p2.id-p1.id;
					}
				});
				
				//赋值
				this.searchList = arr;
			},{
				//初始化执行一次
				immediate:true,
			});
		</script>
	</body>
</html>

音乐播放案例（计算属性实现）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>音乐搜索案例（计算属性）</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			搜索: <input type="text" v-model="searchValue">
			<button @click="sortType = !sortType">排序</button>
			<ul>
				<li v-for="m in searchList" :key="m.id">
					<div style='width:300px;float: left;'>
						ID :{{m.id}}音乐：{{m.name}}
					</div>
					<div style='width:300px;float: left;'>
						歌手：{{m.sname}}
					</div>
					
				</li>
			</ul>
		</div>
		<script>
			//在做列表渲染的时候一定要加上:key 否者数据发生改变时，样式会错位。
			//key一般使用数据的id
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#box',
				data:{
					searchValue:'',//用户搜索
					musicList:[],//数据
					sortType:true//true代表升序false代表降序
				},
				computed:{//计算属性
					searchList(){
						//console.log("用户搜索"+nv);
						//filter会把数据进行循环，如果为false则会移除数据，为true保留数据，最终返回一个集合。
						const arr = this.musicList.filter((p) => {//ES6
							if(p.name.indexOf(this.searchValue) !== -1 || p.sname.indexOf(this.searchValue) !== -1){//包含
								return true;
							}else{
								return false;
							}
						});
						
						//排序
						//sort如果返回p1-p2升序 如果返回p2-p1就是降序
						arr.sort((p1,p2) => {
							if(this.sortType){//升序
								return p1.id-p2.id;
							}else{//降序
								return p2.id-p1.id;
							}
						});
						
						//赋值
						return arr;
					}
				}
			})
			
			vm.musicList = [
				{id:'1', name:'想唱就唱',sname:'张含韶'}
				,{id:'2', name:'冰点与沸点',sname:'张含韶'}
				,{id:'3', name:'夕阳无限好',sname:'陈奕迅'}
				,{id:'4', name:'爱的证明',sname:'沈建祥'}
				,{id:'5', name:'刻下纹身之后' ,sname:'小鸣'}
				,{id:'6', name:'双面人' ,sname:'伍佰'}
				,{id:'7', name:'长情' ,sname:'黎明'}
				,{id:'8', name:'我得你' ,sname:'张学友'}
				,{id:'9', name:'人人望放假' ,sname:'张学友'}
				,{id:'10', name:'太平洋的风' ,sname:'胡德夫'}
				,{id:'11', name:'吻下留人' ,sname:'许志安'}
				,{id:'12', name:'顺时针' ,sname:'梁咏琪'}
				,{id:'13', name:'回来我的爱' ,sname:'阳一'}
				,{id:'14', name:'两只蝴蝶' ,sname:'庞龙'}
				,{id:'15', name:'老鼠爱大米' ,sname:'杨臣刚'}
				,{id:'16', name:'丁香花' ,sname:'唐磊'}
				,{id:'17', name:'爱你' ,sname:'冷草莓'}
				,{id:'18', name:'美梦成真' ,sname:'冷草莓'}
				,{id:'19', name:'老鼠爱大米' ,sname:'huanggm2'}
				,{id:'20', name:'谢谢你的爱1999' ,sname:'cznana'}
				,{id:'21', name:'老鼠爱大米' ,sname:'英文版'}
				,{id:'22', name:'猪之歌' ,sname:'香香'}
				,{id:'23', name:'“吻别”英文版' ,sname:'Michael..'}
				,{id:'24', name:'别说我的眼泪你无..' ,sname:'东来东往'}
				,{id:'25', name:'追杀邱比特' ,sname:'蔡依林'}
				,{id:'26', name:'被风吹过的夏天' ,sname:'金莎'}
				,{id:'27', name:'你到底爱谁' ,sname:'刘嘉亮'}
				,{id:'28', name:'六月的雨' ,sname:'胡歌'}
				,{id:'29', name:'酸酸甜甜就是我' ,sname:'张含韵'}
				,{id:'30', name:'你好,周杰伦' ,sname:'安又淇'}
				,{id:'31', name:'江南' ,sname:'林俊杰'}
				,{id:'32', name:'情人' ,sname:'刀郎'}
				,{id:'33', name:'两只蝴蝶' ,sname:'庞龙'}
				,{id:'34', name:'2002年的第一场雪' ,sname:'刀郎'}
				,{id:'35', name:'看我七十二变' ,sname:'蔡依林'}
				,{id:'36', name:'恭喜发财' ,sname:'刘德华'}
				,{id:'37', name:'童话' ,sname:'光良'}
				,{id:'38', name:'寓言' ,sname:'张韶涵'}
				,{id:'39', name:'宁夏' ,sname:'梁静茹'}
				,{id:'40', name:'断点' ,sname:'张敬轩'}
				,{id:'41', name:'快乐崇拜' ,sname:'潘玮柏'}
				,{id:'42', name:'一首简单的歌' ,sname:'王力宏'}
				,{id:'43', name:'孤单北半球' ,sname:'欧得洋'}
				,{id:'44', name:'十年' ,sname:'陈奕迅'}
				,{id:'45', name:'男人海洋' ,sname:'周传雄'}
				,{id:'46', name:'挥着翅膀的女孩' ,sname:'容祖儿'}
				,{id:'47', name:'我们的爱' ,sname:'F.I.R'}
				,{id:'48', name:'第一次爱的人' ,sname:'王心凌'}
			];

		</script>
	</body>
</html>

最后修改于 2021-09-22 15:16:52

如果觉得我的文章对你有用，请随意赞赏

扫一扫支付