Vue实现列表添加、删除、统计已勾选和未勾选数量

最新推荐文章于 2024-07-14 21:18:34 发布

置顶花落(→)凋谢

最新推荐文章于 2024-07-14 21:18:34 发布

阅读量2.1k

点赞数

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

本文链接：https://blog.csdn.net/qq_41605893/article/details/109539396

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue实现列表添加、删除、统计已勾选和未勾选数量

在这里插入图片描述

在这里插入图片描述
点击复选框可以选择

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#app{
				margin: 0px auto;
				width:800px;
			}
			#txt{
				width: 800px;
				height: 40px;
				border: 2px solid #09f;
				text-indent: 5px;
			}
			ul li{
				list-style: none;
				line-height: 40px;
				padding: 0 10px;
			}
			.type-span{
				width: 10px;
				height: 10px;
				display:inline-block;
				background: #ccc;
				margin-right: 10px;
			}
			.close{
				float: right;
				color: red;
				display: none;
			}
			ul li:hover{
				border: 2px solid #09f;
			}
			ul li:hover .close{
				display: block;
				cursor: pointer;
			}
			.active{
				background: #09f;
			}
			.editText{
				width:80%;
				height:40px;
				border: 1px solid #09f;
				display: none;
			}
			.editing div{
				display: none;
			}
			.editing .editText{
				display: inline;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>小目标列表</h1>
			<h3>添加小目标</h3>
			<p><input type="text"  id="txt" placeholder="添加小目标后，按回车确认" v-model="str" @keyup.enter="add()"></p>
			<p>共有{{this.arr.length}}个目标,{{none===0?'全部完成':'已完成'+(this.arr.length-none)+'个,未完成'+none+'个'}}</p>
			<p>
				<input type="radio" name="aim" checked="true" @click="chooseList(1)"/><label for="">全部目标</label>
				<input type="radio" name="aim"  @click="chooseList(2)" /><label for="">已完成目标</label>
				<input type="radio" name="aim"  @click="chooseList(3)"/><label for="">未完成目标</label>
			</p>
			<ul>
				<!--双击出现输入框 就是给当前li标签设置一个类名editing，设置样式，当li出现这个类名的时候，就出现输入框，并且隐藏其他内容-->
				<li v-for="(a,index) in newArr" :class="{editing:curId===index}">
					<div>
						<span class="type-span"  @click="changeStatus(a)" :class="{active:a.status}"></span>
						<span @dblclick="curId=index">{{a.name}}
						<span class="close" @click.stop="del(a)">X</span>
					</div>
					<input class="editText" type="text"  v-model="a.name" @blur="curId=null" @keyup.enter="curId=null" @focus="saveBefore(a)" @keyup.esc="cancelEdit(a)" v-focus/>
				</li>
			</ul>
		</div>
	</body>
	<script src="../js/Vue.js" type="text/javascript" charset="UTF-8"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				arr:[
					{
					  name:'锻炼',
					  status:false
					},
					{
					  name:'学游泳',
					  status:false
					},
					{
					  name:'学习',
					  status:false
					},
				],
				str:'',
				newArr:[],
				curType:'',
				curId:null
			},
			methods:{
				add:function(){
					if(this.str!==''){
						this.arr.push({
						name:this.str,
						status:false
						}),
					 	this.str=''
					}
				},
				chooseList:function(type){
					this.curType=type
					switch(type){
						case 1:
							this.newArr=this.arr
							break;
						case 2:
							this.newArr=this.arr.filter(function(val){return val.status===true})
							break;
						case 3:
							this.newArr=this.arr.filter(function(val){return val.status===false})
							break;
					}
				},
				changeStatus:function(a){
					a.status=!a.status
					this.chooseList(this.curType)
				},
				del:function(a){
					index=this.arr.indexOf(a)
					if(confirm('你确定要删除"'+a.name+'"吗？')){
						this.arr.splice(index,1)
						this.chooseList(this.curType)
					}
				},
				//修改前
				saveBefore:function(a){
					//记录修改前的文本内容
					this.beforeText=a.name;
				},
				//取消修改
				cancelEdit:function(a){
					//输入框利用v-model绑定了当前项
					//这一步就是把之前保存的beforeEditText赋值给当前name，起到一个恢复原来值得属性
					a.name=this.beforeText;
					this.curId=null
				}
			},
			created:function(){
				//初始化 默认显示所有目标
				this.newArr=this.arr
			},
			computed:{
				none:function(){
					return this.arr.filter(function(val){
						return val.status===false
					}).length
				}
			},
			directives:{
				focus:function(el){
					el.focus();
				}
			}
		})
	</script>
</html>