每天一点VUE（DAY 3-VUE2篇）

Pot Kiss

已于 2022-05-14 13:46:45 修改

阅读量784

点赞数 1

分类专栏：每天一点VUE 文章标签： vue.js vue 学习

于 2022-03-31 02:04:48 首次发布

本文链接：https://blog.csdn.net/m0_60681099/article/details/123809044

版权

每天一点VUE 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1、条件渲染

v-show的渲染(节点还在，只是用了 display:none;隐藏了)

v-if是直接吧这个元素从dom上移除了

		<div id='block'>
			<button v-show = "1"  >在</button>
			<button v-if = "1"  >在</button>
			<button v-show = "0"  >不在</button>
			<button v-if = "0"  >不在</button>
			<br>
			<button v-if = "0"  >if</button>
			<button v-else-if = "0"  >elseif</button>
			<button v-else   >else</button>
		</div>

注：if elseif else中，有一个为1后面的就不判断了，他们的顺序次序不能颠倒或者打断。

			<div v-if="0">
				<button v-show="1">在</button>
				<button v-if="1">在</button>
			</div>
			<template v-if="0">
				<button v-show="1">在</button>
				<button v-if="1">在</button>
			</template>
        
   /*注意，操作多个元素隐藏和显示，如果必须要给这些元素加一个容器，
    那就加template这样的话不会影响结构，如果用来div可能会影响之前的页面结构*/

2、列表渲染

2.1、遍历

数组遍历

		<div id='block'>
			<ul v-for="(item,index) in a" :key="item.id">
				<li>{{item.name}}-{{item.age}}</li>
			</ul>
		</div>

		let a = new Vue({
			el: '#block',
			data: {
				a:[
					{id:0,name:'g',age:20},
					{id:1,name:'s',age:20},
					{id:2,name:'w',age:20}
				]
			},
		})

字符串遍历

		<div id='block'>
			<ul v-for="(item,index) in a" :key="index">
				<li>{{item}}-{{index}}</li>
			</ul>
		</div>

		let a = new Vue({
			el: '#block',
			data: {
				a:"abcde"
			},
		})

对象遍历

		<div id='block'>
			<ul v-for="(item,index) in a" :key="index">
				<li>{{item}}-{{index}}</li>
			</ul>
		</div>

		let a = new Vue({
			el: '#block',
			data: {
				a:{
					name:"22",
					age:23,
					k:"99"
				}
			},
		})

遍历指定次数

		<div id='block'>
			<ul v-for="(item,index) in 6" :key="index">
				<li>{{item}}-{{index}}</li>
			</ul>
		</div>

2.2、key的工作原理和重要性

vue在渲染页面时，首先会拿到数据，生成一个虚拟DOM，然后再生成真实DOM渲染到页面上，当数据发生变化时，vue会把新数据在再成一个虚拟DOM，然后根据key来和之前生成的虚拟DOM进行diff算法的对比，如果新数据的key的元素和旧数据的key的元素对比后不同，就把不同的部分生成真实DOM再次渲染到页面上，然后复用之前渲染好的相同的那部分真实DOM，如果对比后相同，就直接复用之前渲染好的那部分真实DOM。（这样做的好处是节约了资源，进行复用，让页面展示的更快，效率也比没加的高，如果我们没有加key的话，vue会自动帮我们加上:key="index"）

产生的问题：如果你的key用的是index，并且在你的操作需要破坏之前的顺序结构（插入或者删除），就会发生错误。
//当你给每个li输入框写个值，在添加一个的话，index会从新的节点开头重新排，就会导致之前的乱了
	    <div id='block'>
			<ul v-for="(item,index) in a" :key="index">
				<li>{{item.name}}<input/></li>
			</ul>
			<button type="button" @click="add">btn</button>
		</div>

		let a = new Vue({
			el: '#block',
			data: {
				a:[{id:0,name:"擦1"},{id:1,name:"擦2"},{id:2,name:"擦3"}]
			},
			methods:{
				add(){
					this.a.unshift({
						id:3,
						name:"jsak"
					})
				}
			}
		})
解决：:key="item.id"
        //当使用id作为key的时候，虚拟节点在进行对比时，就会找到对应的那个块，就不会发生错误
	    <div id='block'>
			<ul v-for="(item,index) in a" :key="item.id">
				<li>{{item.name}}<input/></li>
			</ul>
			<button type="button" @click="add">btn</button>
		</div>

		let a = new Vue({
			el: '#block',
			data: {
				a:[{id:0,name:"擦1"},{id:1,name:"擦2"},{id:2,name:"擦3"}]
			},
			methods:{
				add(){
					this.a.unshift({
						id:3,
						name:"jsak"
					})
				}
			}
		})

2.3、列表过滤

watch方法

<div id='block'>
	<input type="text" v-model="search"/>
	<ul v-for="(item,index) in midList" :key="item.id">
		<li>{{item.name}}-{{item.age}}</li>
	</ul>
</div>
let a = new Vue({
	el: '#block',
	data: {
		search:'',
		list: [{
			id: 0,
			name: "擦1",
			age:20
		}, {
			id: 1,
			name: "擦2",
			age:8
		}, {
			id: 2,
			name: "3",
			age:90
		}, {
			id: 3,
			name: "擦4",
			age:90
		}, {
			id: 4,
			name: "5",
			age:90
		}],
		midList:[]
	},

	watch:{
		search:{
            //这里如果不加immediate的话就一上来不显示
			immediate:true,
			handler(newV,oldV){
				this.midList = this.list.filter((lis)=>{
					return lis.name.indexOf(newV) != -1;
				})
			}
		}
	}
})

computed方法

<div id='block'>
	<input type="text" v-model="search" />
	<ul v-for="(item,index) in midList" :key="item.id">
		<li>{{item.name}}-{{item.age}}</li>
	</ul>
</div>

let a = new Vue({
	el: '#block',
	data: {
		search: '',
		list: [{
			id: 0,
			name: "擦1",
			age: 20
		}, {
			id: 1,
			name: "擦2",
			age: 8
		}, {
			id: 2,
			name: "3",
			age: 90
		}, {
			id: 3,
			name: "擦4",
			age: 90
		}, {
			id: 4,
			name: "5",
			age: 90
		}]
	},
	computed:{
		midList(){
			return this.list.filter((lis)=>{
				return lis.name.indexOf(this.search) != -1
			})
		}
	}
})

对比可以看出computed比较好用点，注意filter需要return返回值

2.4、列表排序


<div id='block'>
	<input type="text" v-model="search" />
	<button type="button" @click="sortNum = 1">正序</button>
	<button type="button" @click="sortNum = 2">反序</button>
	<button type="button" @click="sortNum = 0">原来序</button>
	<ul v-for="(item,index) in midList" :key="item.id">
		<li>{{item.name}}-{{item.age}}</li>
	</ul>
</div>

let a = new Vue({
	el: '#block',
	data: {
		search: '',
		sortNum: 0,
		list: [{
			id: 0,
			name: "擦1",
			age: 20
		}, {
			id: 1,
			name: "擦2",
			age: 8
		}, {
			id: 2,
			name: "3",
			age: 90
		}, {
			id: 3,
			name: "擦4",
			age: 9
		}, {
			id: 4,
			name: "5",
			age: 0
		}]
	},
	computed: {
		midList() {
			let a = this.list.filter((lis) => {
				return lis.name.indexOf(this.search) != -1
			})
			if (this.sortNum) {
				a.sort((a, b) => {
					return this.sortNum === 1 ? a.age - b.age : b.age - a.age;
				})
			}
			return a
		}
	}
})

注意这里的sort方法，传入两个参数，一个前一个后，函数写成箭头，还需要return返回值