vue动画+animate.css

最新推荐文章于 2024-04-12 05:33:02 发布

原创最新推荐文章于 2024-04-12 05:33:02 发布 · 466 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue animate.css

前端框架专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的动态搜索过滤示例，其中包括实时文本输入更新及过渡动画效果。通过此示例，读者可以了解到如何利用Vue.js进行DOM元素的动态更新，并结合第三方CSS库animate.css为列表项的增删操作添加平滑的动画过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue</title>
	<script src='vue.min.js'></script>
	<link rel="stylesheet" href="animate.css">
	<style>
		li{	
			background-color: green;
			list-style: none;
			border:1px solid black;
			margin-bottom: 4px;
			width: 200px;
			padding: 2px;
		}
	</style>
</head>
<body>
	<div id='app'>
		<div>
			<input type="text" @input='chg' v-model='msg'>
				<ul>
					<transition-group enter-active-class='animated fadeIn' leave-active-class='hinge animated'>
					<li  v-for='(v,i) in arr2' :key='i'>{{v}}</li>
					</transition-group>
				</ul>
		</div>
	</div>
	<script>
		new Vue({
			el:'#app',
			data:{
				arr:['apple','banana','pear','watermelon','orange','hello'],
				msg:'',
				arr2:[]
			},
			methods:{
				chg(){
					this.arr2 = [];
					this.arr.forEach(function(val){
						if(this.msg !== ''){
							if(val.indexOf(this.msg) >= 0){
								this.arr2.push(val);
							}
						}
					}.bind(this));
				}
			}
		});
	</script>
</body>
</html>