vue基础知识小demo

最新推荐文章于 2024-01-28 06:18:07 发布

倚楼听风雨的行者

最新推荐文章于 2024-01-28 06:18:07 发布

阅读量272

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42972187/article/details/92794173

该博客使用Vue基础知识制作了一个小demo，其主要功能为实现任务表的完成与删除操作，聚焦于前端开发实践。

1、用vue基础知识，做的一个小demo ，实现功能是，任务表的完成与删除；

<template>
	<div id="box">
	    <input @keyup.enter="shuru" type="text" v-model="inputinfo" />
	   <div class="box-inner">
	   	<ul>
	   		<li v-for="(item,index) in datalist ":key="index" class="inserted " :class="{on:show==!item.show}">  
	   		<!--input绑定show属性点击为true，再点击为false-->
	   		<input type="checkbox" @click="checked1(item,index,item.show)":checked="item.show"/>
	   			<span>{{index+1}}</span>{{item.name}}
	   			<button @click ="delete1(index)"class="delete">delete</button>
	   			<button class="finished" v-if="show==!item.show">finished</button>	
	   		</li>
	   		<li v-if="datalist.length==0">没有数据了哈哈</li>
	   	</ul>
	   </div>
	</div>
</template>

<script>export default {
	data() {
		return {
			inputinfo: '',
		    show: false,
			datalist: [],
		}
	},
	created() {},
	methods: {
		shuru() {
			//vue里面的键盘enter事件@keyup.enter	
			if(this.inputinfo != "") {
				this.datalist.push({
					name: this.inputinfo,
					show:false,//将控制按钮显示隐藏的属性添加到列表里面，通过v-for循环出来
				})
				this.inputinfo = "";
			}
		},
		delete1(index) {
			this.datalist.splice(index, 1)
		},
		checked1(item,index, show) {

			this.datalist[index].show =!show;//点击改变show的状态；
		
		}
	}
}</script>

<style>

	.on {
	text-decoration: line-through;
color:red;
}

.inserted {
	position: relative;
}

.delete {
	padding: 2px;
	background: red;
}

.finished {
	padding: 2px;
	background: greenyellow;
}

.box-inner {
	width: 300px;
	height: 300px;
	margin: 30px auto;
	background: grey;
	/*opacity: 0.5;*/
}

input {
	border: 1px solid black;
}

span {
	color: red;
}</style>