使用Vue编写简单的todolist

最新推荐文章于 2024-06-02 22:12:52 发布

小手冰凉的007

最新推荐文章于 2024-06-02 22:12:52 发布

阅读量236

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_48065262/article/details/114436536

版权

JavaScript 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

VUE

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" @keydown.enter="change"  ref="val" /><button @click="search" >搜索</button><br>
			<p>代办事件</p>
			<div>
				<input type="checkbox"  v-model="flage" @input="cheaked" />全选
				<div>
					<ul>
						<li v-for="(val,idx) in list"  :key="idx" >
						<input type="checkbox"  v-model="val.flg" ref="texts" @change="tes" />
						<span>
							<span v-if="val.text" @click="changeText(idx)" >{{val.item}}</span>
							<input type="text" value=""  v-else  @keydown.enter="textFale(idx)" v-model="val.item" 
								 v-focus
							/>
						</span>
						<button type="button"  @click="del(idx)" >删除</button>
						</li>
					</ul>
					
					<!-- ______ -->
					<!-- <ul v-else >
						<li v-for="(val,idx) in arry"  ref="ass"  >
						<input type="checkbox"  v-model="val.fla" ref="texts" />
						<span>
							<span v-if="val.text" @click="changeT(idx)" >{{val.item}}</span>
							<input type="text" value=""  v-else  @keydown.enter="textF(idx)" v-model="val.item" 
								autofocus="autofocus"
							/>
						</span>
						<button type="button"  @click="dels(idx)" >删除</button>
						</li>
					</ul> -->
				</div>
			</div>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		
		// 注册一个全局自定义指令 `v-focus`
		Vue.directive('focus', {
		// 当被绑定的元素插入到 DOM 中时……
		inserted: function (el) {
		// 聚焦元素
		el.focus()
		}
		})
		
		var vm = new Vue({
			el:"#app",
			data:{
				list:[],
				flage:false,
				arry:[],
				
			},
			methods:{
				change(){
					this.list.push({
						item:this.$refs.val.value,
						fla:false,
						text:true
					})
				},
				cheaked(){
					this.list.forEach(val=>{
						val.flg = !this.flage
					})
				},
				del(i){
					this.list.splice(i,1);
				},
				changeText(i){
					this.list[i].text = !this.list[i].text
					// this.text = !this.text
				},
				textFale(i){
					this.list[i].text = !this.list[i].text;
				},
				// 模糊搜索
				search(){
				
					let conditions  = new RegExp(this.$refs.val.value);
					let arr = [];
					this.list.forEach(val=>{
						if(conditions.test(val.item)){
							arr.push({
								item:val.item,
								fla:false,
								text:true
							})
						}
					})
					this.list = arr;
				},
				tes(){
					this.flage = this.list.every(val=> val.flg)
				}
				// changeT(i){
				// 	this.arry[i].text = !this.arry[i].text
				// },
				// textF(i){
				// 	this.arry[i].text = !this.arry[i].text
				// },
				// dels(i){
				// 	this.arry.splice(i,1);
				// }
				
			},
			
		})
	</script>
</html>

小手冰凉的007

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用Vue编写简单的todolist

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <input type="text" @keydown.enter="change" ref="val" /><button @click="search" &g
复制链接

扫一扫

专栏目录