<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="app">
<div class="header">
<div class="container">
<div class="logo">toDoList</div>
<div class="input-area">
<input type="text" @input="handleInput" :value="curMask"/>
<button @click="addMask">添加</button>
</div>
</div>
</div>
<div class="container">
<h2>
<span>正在进行</span>
<span class="mask-num">{
{
needDoList.length }}</span>
</h2>
<ul class="mask-list">
<li
v-for="(mask, index) in needDoList"
:key="mask.id"
>
<div>
<input type="checkbox" @change="doCheck(index, 'need')"/>
<span>{
{
mask.title }}</span>
</div>
<button @click="deleteMask(index, 'need')">删除</button>
</li>
</ul>
</div>
<div class="container">
<h2>
<span>已经完成</span>
<span class="mask-num">{
{
completeList.length }}</span>
</h2>
<ul class="mask-list complete-list">
<li
v-for="(mask, index) in completeList"
:key="mask.id"
>
<div>
<input type="checkbox" @change="doCheck(index, 'complete')"/>
<span>{
{
mask.title }}</span>
</div>
<button @click="deleteMask(index, 'complete')">删除</button>
</li>
</ul>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
curMask: '',
needDoList: [], //接收 正在进行的数组
completeList: [] //已经完成
},
methods: {
handleInput (e) {
this.curMask = e.target.value; //获取input的值
},
addMask () {
//this.needDoList.push(this.curMask)
if(this.curMask === '') {
return }; //如果输入的input值为空 直接返回
this.needDoList.push({
//点击按钮 将input的值添加到 正在进行noodDoList的数组当中
title: this.curMask, //添加的是字符串 字符串没有title和对象 需要转化为对象
id: Math.random()
});
this.curMask = ''; //按钮添加之后 input为空
},
doCheck (index, type) {
if(type === 'need') {
//点击checkbox ,正在进行变为已经完成 为了区分正在进行和已经完成,设置type
const completeMask = this.needDoList.splice(index, 1);
this.completeList.push(...completeMask);
} else {
const noCompleteMask = this.completeList.splice(index, 1);
this.needDoList.push(...noCompleteMask);
}
},
deleteMask (index, type) {
//已经完成和正在进行 都是点击删除按钮进行删除 为了区分 设置type
const toDoList = type === 'need' ? this.needDoList : this.completeList; //如果type=need 则删除是needDoList 否则删除的是completeList
toDoList.splice(index, 1);
}
}
})
</script>
</body>
</html>
vue中 简单的添加删除功能实现
猜你喜欢
转载自blog.csdn.net/renxiaoxing55/article/details/108319937
今日推荐
周排行