TodoList的实现vue

小天妖精

于 2021-03-04 20:32:35 发布

阅读量162

点赞数

分类专栏： Javascript 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_39084623/article/details/114377141

版权

Javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单应用案例，该应用包含输入框用于添加新条目到列表，并能通过点击按钮删除指定条目。此外还实现了基于输入框内容的列表搜索过滤功能。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{list-style: none;}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="text" name="search"  @keydown.enter="fn" ref="txt">
			<input type="submit" name="" id="" value="搜索" @click="search"/>
			<hr/>
			<ul>
				<li v-for="(val,idx) in data" :key="idx">{{val}}
				<button @click="fn1(idx)" ref="del">删除</button>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="./vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				data:[]
			},
			methods:{
				fn(){
					this.data.push(this.$refs.txt.value)
				},
				fn1(idx){
					this.data.splice(idx,1)
				},
				search(){
					let data=[]
					this.data.forEach((val,idx)=>{
						if(val.includes(this.$refs.txt.value)){
							data.push(val)
						}
					})
					this.data=data
				}
			}
		})
	</script>
</html>

在这里插入图片描述