Java教程

动画--列表增加删除

本文主要是介绍动画--列表增加删除，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

动态的增加与删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表动画</title>
		<script src="../js/vue-2.4.0.js"></script>
		<style type="text/css">
			li {
				border: 1px dashed #aaa;
				height: 50px;
				line-height: 50px;
				transition: all 0.8s ease;
				width: 100%;
			}
			li:hover {
				background: hotpink;
			}
			
			.v-enter,
			.v-leave-to {
				opacity: 0;
				transform: translateY(80px);
			}
			
			.v-enter-active,
			.v-leave-active {
				transition: all 0.6s ease;
			}
			
			.v-move{
			  transition: all 0.8s ease;
			}
			.v-leave-active{
			  position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="app">
			id:<input v-model="id"/>
			name:<input v-model="name"/>
			<button @click="add()">添加</button>
			
			<!--为多个元素添加动画需要使用transition-group-->
			<!--bag 属性：修改transition-group编译后生成的标签名称，默认为span-->
			<transition-group appear tag="ul">
				<li v-for="(item,index) in userList" :key="item.id" @click="del(index)">
					{{item.id}}-----{{item.name}}
				</li>
				
			</transition-group>
				
			
		</div>
		
		<script type="text/javascript">
			let vm = new Vue({
				el: "#app",
				data: {
					userList:[
						{id:1,name:"刘备"},
						{id:2,name:"关羽"},
						{id:3,name:"张飞"},
					],
					id:'',
					name:'',
				},
				methods: {
					add() {
						let user = {id:this.id,name:this.name};
						this.userList.push(user);
						this.id = this.name = '';
					},
					del(index) {
						this.userList.splice(index, 1);
					}
					
				}
			});
		</script>
	</body>
</html>

调用js文件来引用vue文档，可以直接用下方的代码
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

这篇关于动画--列表增加删除的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航