一.v-for的注意点
1.v-for为了提升性能, 在更新已渲染过的元素列表时，会采用“就地复用”策略。
也正是因为这个策略, 在某些时刻会导致我们的数据混乱。
例如: 在列表前面新增了内容
2.为了解决这个问题, 我们可以在渲染列表的时候给每一个元素添加一个独一无二的key,
v-for在更新已经渲染过的元素列表时, 会先判断key是否相同, 如果相同则复用, 如果不同则重新创建
3.key属性注意点:不能使用index的作为key,因为当列表的内容新增或者删除时index都会发生变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>33-Vue-v-for注意点</title>
<!--1.下载导入Vue.js -->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<from>
<input type="text" v-model="name">
<input type="submit" value="添加" @click.prevent="add">
</from>
<ul>
<li v-for="(value,index) in persons" :key="value.key">
<input type="checkbox">
<span>{{index}} --- {{value.name}}</span>
</li>
</ul>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
name:"",
persons:[
{name:"zs",key:1},
{name:"ls",key:2},
{name:"ww",key:3},
]
},
methods:{
add(){
//拿到person中最后一条数据
let lastPerson = this.persons[this.persons.length-1];
//1.根据用户输入的姓名创建一个新的人
let newPerson = {name:this.name,id:lastPerson.id + 1};
//2.将这个新的人添加persons的后面
// this.persons.push(newPerson);
//2.将这个新的人添加persons的前面
this.persons.unshift(newPerson);
//3.输入完成后将用户输入框清空
this.name = "";
}
},
computed:{}
});
</script>
</body>
</html>
二.v-for的渲染过程
1.v-for在渲染元素的时候，会先查看缓存中有没有需要查看的元素
2.如果缓存中没有需要渲染的元素，就会创建一个新的放在缓存中
如果缓存中有需要渲染的元素，就不会创建一个新的，而是直接复用原来的
注意点：在Vue中只要数据发生了改变，那么就会自动重新渲染
在列表前面新增了内容
三.列表动画——同时给多个元素添加动画
1.如何同时给多个元素添加过渡效果？
利用transition-group包裹需要添加动画的元素，添加appear属性，可以让元素一出现就显示动画并且编写完整的显示动画和隐藏动画的css代码
2.指定把执行动画的元素放在什么元素中？
给transition-group标签添加tag="ul",这样就不用自己添加ul标签了
要求：元素一出现就显示淡出动画，新添加的元素也显示淡出的动画，点击删除某元素显示淡入效果；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>34-Vue动画-列表动画</title>
<!--1.下载导入Vue.js -->
<script src="js/vue.js"></script>
<style>
.v-enter{
opacity: 0;
}
.v-enter-to{
opacity: 1;
}
.v-enter-active{
/*用3s的时间过渡从显示开始到显示结束*/
transition: all 3s;
}
.v-leave{
opacity: 1;
}
.v-leave-to{
opacity: 0;
}
.v-leave-active{
/*用3s的时间过渡从隐藏开始到隐藏结束*/
transition: all 3s;
}
</style>
</head>
<body>
<div id="app">
<from>
<input type="text" v-model="name">
<input type="submit" value="添加" @click.prevent="add">
</from>
<transition-group appear tag="ul">
<li v-for="(value,index) in persons" :key="value.id" @click="del(index)">
<input type="checkbox">
<span>{{index}} --- {{value.name}}</span>
</li>
</transition-group>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
name:"",
persons:[
{name:"zs",id:1},
{name:"ls",id:2},
{name:"ww",id:3},
],
id:3
},
methods:{
add(){
//要保证每次添加的数据的id都不相同
this.id++;
//1.根据用户输入的姓名创建一个新的人
let newPerson = {name:this.name,id:this.id};
//2.将这个新的人添加persons的后面
// this.persons.push(newPerson);
//2.将这个新的人添加persons的前面
this.persons.unshift(newPerson);
//3.输入完成后将用户输入框清空
this.name = "";
},
del(index){
this.persons.splice(index,1);
}
},
computed:{}
});
</script>
</body>
</html>
效果：
网友评论