用vue写一个清单

最新推荐文章于 2022-09-07 11:43:03 发布

原创最新推荐文章于 2022-09-07 11:43:03 发布 · 294 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

这篇博客介绍如何利用Vue.js实现一个具备本地存储、完成/未完成状态切换、增删改功能的待办事项清单。HTML、JavaScript代码示例提供，并展示了最终效果。

用vue写一个清单

清单功能
可以实现本地存储
有完成和未完成
可以增加删除
可以修改内容
html部分

<div id="app">
	<div class="top">
		<div>
			<label>ToDoList</label>
			<input type="text"placeholder="添加ToDo" v-model.trim="temp" @keyup.enter="addItem()"/>	
		</div>
	</div>
	<div class="content">
		<h2>正在进行</h2>
		<div class="list">
			<div class="item" v-for="item in dolist" :key="item.title">
				<input type="checkbox" v-model="item.done"/>
				<span
				@dblclick="editTemp=item.title;item.state=1"
				v-show="item.state===0"
				>{{item.title}}</span>
				<input
				type="text" 
				v-model="editTemp" 
				v-show="item.state==1"
				@keyup.enter="item.title==editTemp;item.state=0;"
				@blur="item.title=editTemp;item.state=0;"
				@keyup.esc="item.state=0;editTemp=item.title;"
				v-focus="item.state==1"
				>
				<button @click="delItem(item)">×</button>
			</div>
		</div>
		<h2>已经完成</h2>
		<div class="list">
			<div class="item" v-for="item in undolist" :key="item.title">
				<input type="checkbox" v-model="item.done"/>
				<span
				@dblclick="editTemp=item.title;item.state=1"
				v-show="item.state===0"
				>{{item.title}}</span>
				<input
				type="text" 
				v-model="editTemp" 
				v-show="item.state==1"
				@keyup.enter="item.title==editTemp;item.state=0;"
				@blur="item.title=editTemp;item.state=0;"
				@keyup.esc="item.state=0;editTemp=item.title;"
				v-focus="item.state==1"
				>
				<button @click="delItem(item)">×</button>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	new Vue({
		el:"#app",
		//修改内容
		directives:{
			"focus":{
				update(el,binding){
					if(binding.value){el.focus()}
				}
			}
		},
		// 存储数据
		watch:{
			"list":{
				handler(nval){
					localStorage.setItem("list",JSON.stringify(this.list))
				},
				deep:true
			}
		},
		computed:{
			//未完成
			dolist(){
				return this.list.filter(item=>!item.done)
			},
			// 完成
			undolist(){
				return this.list.filter(item=>item.done)
			}
		},
		methods:{
			//删除
			delItem(item){
				var ind = this.list.findIndex(value=>value.title==item.title)
				this.list.splice(ind,1)
			},
			//添加
			addItem(){
				var item ={title:this.temp,done:false,state:0}
				this.list.unshift(item)
				this.temp=""//清空
			}
		},
		data:{
			//通过本地存储来获取数据
			list:JSON.parse(localStorage.getItem("list")||"[]"),
			temp:"",//临时标题
			editTemp:""
		}
	})
</script>