vue 写文本写入+本地储存

邢帥兵_

2713人浏览 · 2022-09-21 21:51:41

邢帥兵_ · 2022-09-21 21:51:41 发布

效果图

注意！！！需要外引入 vue 文件！别忘咯

代码如下

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		#app {
			width: 800px;
			margin: 0 auto;
			box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		}

		#app>input {
			width: 100%;
			height: 40px;
			font-size: 25px;
			padding-left: 15px;
			box-sizing: border-box;
		}

		#app h2 {
			margin-left: 20px;
		}

		#app h2:nth-of-type(1) {
			color: #dd001b;
		}

		#app h2:nth-of-type(2) {
			color: #41a863;
		}

		#app div {
			width: 100%;
			height: 60px;
			background-color: pink;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20px;
			box-sizing: border-box;
		}

		#app div p {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		#app div input {
			width: 30px;
			height: 30px;
		}
	</style>
</head>

<body>
	<div id="app">
		<!-- @keyup.enter  键盘回车事件 -->
		<input type="text" placeholder="请输入~~~" @keyup.enter="addlist">
		<h2>未完成&emsp;{{undelist.length}}<span></span></h2>
		<div v-for="(item,index) in undelist" :key="index">
			<p>
				<input type="checkbox" v-model="item.done">
				<span>&emsp;&emsp;&emsp;{{item.title}}</span>
			</p>
			<button>删除</button>
		</div>

		

		<h2>已完成&emsp;{{donelist.length}}<span></span></h2>
		<div v-for="(item,index) in donelist" :key="index">
			<p>
				<input type="checkbox" v-model="item.done">
				<span>&emsp;&emsp;&emsp;{{item.title}}</span>
			</p>
			<button @click="relist(item)">删除</button>
		</div>
	</div>
</body>
<script src="./js/vue.js"></script>
<script>
	new Vue({
		el: "#app",
		computed: {
			undelist() {
				// 保留未选中的  (done: false)
				return this.list.filter(item => !item.done)
			},
			donelist() {
				// 保留选中的  (done: true)
				return this.list.filter(item => item.done)
			}
		},
		methods: {
			// 删除元素
			relist(item) {
				// indexOf  查找元素
				var i = this.list.indexOf(item)
				// 从i元素开始删，删一个
				this.list.splice(i, 1)
			},
			// 添加元素
			addlist(er) {
				// unshift  在元素前面加
				this.list.unshift({
					done: false,
					// .target  当前初触发事件的DOM元素
					// er.target.value   文本框的 value值
					title: er.target.value
				})
				// 清空输入框
				er.target.value = "";
			}
		},
		data() {
			return {
				// list: [{
				// 	done: true,
				// 	title: "打刘子磊",
				// }]

				// localStorage.getItem("todo")    获取本地存储todo的值,找不到为【】空
				list: JSON.parse(localStorage.getItem("todo") || "[]")
			}
		},
		watch: {
			"list":{
				handler() {
					// localStorage.setItem   把todo和todo的值存到 本地！
					localStorage.setItem("todo",JSON.stringify(this.list));
				},
				// watch加上  deep:true  之后就是深度监听（ 不可缺少 ）
				deep:true,
			}
		}
	})
</script>

</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^