代码
<template>
<div>
<div>
<label>ID</label>
<input type="text" v-model="id"></input>
<label>名字</label>
<input type="text" v-model="mingzi"></input>
<button @click="add">添加</button>
</div>
<ul>
<transition-group>
<li v-for="item in list" :key="item.id">
{{item.id}}----{{item.mingzi}}
</li>
</transition-group>
</ul>
</div>
</template>
<script>
export default {
name: "list",
data(){
return{
id:'',
mingzi:'',
list:[
{id:1,mingzi:'赵高'},
{id:2,mingzi:'秦桧'},
{id:3,mingzi:'王瑾'}
]
}
},
methods:{
add(){
this.list.push({id:this.id,mingzi:this.mingzi})
this.id=this.mingzi=''
}
}
}
</script>
<style scoped>
li{
border:1px dashed #999;
margin: 5px;
line-height: 35px;
padding-left: 5px;
font-size: 12px;
}
.v-enter,.v-leave-to{
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,.v-leve-active-active{
transition: all 0.6s ease;
}
li:hover{
background-color: deeppink;
transition: all 0.8s ease;
}
</style>