21 Vue中实现列表动画过滤效果和总结

最新推荐文章于 2023-10-13 11:42:57 发布

技术~子云

最新推荐文章于 2023-10-13 11:42:57 发布

阅读量166

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/davice_li/article/details/127534639

版权

vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

一、实现简单方式显示列表。点击提交按钮，可以显示和添加列表中的元素

上代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<div v-for="item in list"  :key="item.id">{{item.title}}</div>
			<button @click="handleBtnClick">提交</button>
		</div>

		<script type="text/javascript">
			var count = 0
			var vm = new Vue({
				el: "#app",
				data:{
					list:[]
				},
				methods:{
					handleBtnClick:function() {
						this.list.push({
							id: count++, 
							title: "hello world"
						})
					}
				}
			})
		</script>

	</body>
</html>

二、改造加入动画效果。加入transition-group 标签

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue中多个元素或组件的过渡</title>
		<script src="../vue.js"></script>
		<style type="text/css">
			.v-enter,.v-leave-to{
				opacity: 0
			}
			.v-enter-active,.v-leave-active{
				transition: opacity 1s;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<transition-group>
				
				<div v-for="item in list" key="item.id">{{item.title}}</div>
			</transition-group>
			<button @click="handleBtnClick">提交</button>
		</div>

		<script type="text/javascript">
			var count = 0
			var vm = new Vue({
				el: "#app",
				data:{
					list:[]
				},
				methods:{
					handleBtnClick:function() {
						this.list.push({
							id: count++, 
							title: "hello world"
						})
					}
				}
			})
		</script>

	</body>
</html>

添加动画效果使用手动加样式的方式来实现