实现todolist增删改查 超详细

已于 2024-06-28 18:28:25 修改
阅读量143 收藏
点赞数 5
文章标签： 前端 javascript 开发语言
于 2024-06-27 19:35:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78320134/article/details/140021149
版权
vue2的Todolist

首先在创建四个.vue文件在src目录下，并且在App组件里面导入使用下面是目录：

下面是App里面的代码：

<template>
  <div id="app">
    <!-- 第一个是input输入框 -->
    <HelloWorld @hus="yiu" />
    <!-- 第二个是渲染添加后的数据没选中的 -->
    <Weixuan :list="list" @dels="delst" />
    <!-- 第三个是添加后选中状态 -->
    <Xuanzhong :list="list" />
 
  </div>
</template>

<script>
// 导入所需的组件
import HelloWorld from './components/HelloWorld.vue'
import Weixuan from './components/Weixuan.vue'
import Xuanzhong from './components/Xuanzhong.vue'


export default {
  name: 'app',
  // 然后在components里面注册刚才导入的组件
  components: {
    HelloWorld,
    Weixuan,
    Xuanzhong,
 
  },
  // 定义数据
  data() {
    return {
      // 定义一个数组
      list: []
    }
  },
  // 在方法里面实现功能
  methods: {
    // 接受参数然后从新赋值
    yiu(list) {
      console.log(list);
      this.list = list
    },

    delst(index) {
      // 删除当前的数据
      this.list.splice(index, 1)
    }
  },

}


</script>

 然后就是第一个组件HelloWorld里面的input输入事件

<template>
  <div class="hello">
    <header>
      <section>
        <!-- 阻止表单的默认提交事件 -->
        <label for="title">ToDoList</label>
        <input type="text" placeholder="添加ToDo" v-model="msg" @keyup.13="add" />
      </section>
    </header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义输入的字段为字符串
      msg: '',
      // 然后定义个数组
      list: []
    }
  },
  methods: {
    // 在输入完字段后执行add事件然后把事件添加到数组里面，通过子传父的方法，传到父组件做处理
    add() {
      this.list.push({ title: this.msg, flag: false, checked: false });
      this.$emit('hus', this.list)
    },
  },
};
</script>

<style>
/* 这边是样式 */
label {
  float: left;
  width: 100px;
  line-height: 50px;
  color: #ddd;
  font-size: 24px;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header {
  height: 50px;
  background: #333;
  background: rgba(47, 47, 47, 0.98);
}

header input {
  float: right;
  width: 60%;
  height: 24px;
  margin-top: 12px;
  text-indent: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),
    0 1px 6px rgba(0, 0, 0, 0.45) inset;
  border: none;
}

input:focus {
  outline-width: 0;
}

@media screen and (max-device-width: 620px) {
  section {
    width: 96%;
    padding: 0 2%;
  }
}

@media screen and (min-width: 620px) {
  section {
    width: 600px;
    padding: 0 10px;
  }
}
</style>

然后就是第二个组件，渲染数据，list组件

<template>
    <div class="weixuan">
        <section>
            <h2>正在进行<span>{{ sum }}</span></h2>
            <ol>
                <li v-for="item,index in list" v-show="!item.flag" :key="index">
                    <input type="checkbox" v-model="item.flag" />
                    <!-- 在点击p表标签时进入编辑的状态 -->
                    <input style="width:80%;margin-left:30px; display: none;" ref="input" v-show="item.checked"  @blur="blur(index, $event)" />
                    <!-- 不是编辑状态 -->
                    <p @dblclick="bianji(index)">{{ item.title }}</p>
                    <a href="javascript:;" @click="dels(index)">-</a>
                </li>
            </ol>
        </section>
    </div>
</template>
<script>
export default {
    // 接收父组件传过来的数据
    props:['list'],
    methods:{
        // 双击出现input框然后编辑
        bianji(idx){
            // idx是传过来的参数，当前的index当前数组的下标
            this.list[idx].checked = true
            // 通过nextTick让当前的input获焦
            this.$nextTick(() => {
                this.$refs.input[idx].focus()
            })
        },
        // 然后失焦 完成编辑
        blur(index, e) {
            // 通过事件对象e得到事件对象上的值就是e.target.value 修改当前的title的值
            this.list[index].title = e.target.value
            this.list[index].checked = false
        },
        dels(index){
            // 删除 接收当前数组的下标 
            // 然后在父组件做事情，子通知父
            this.$emit('dels', index)
        }
    },
    computed:{
        sum(){
            // 通过计算属性和过滤这个数组里面的item每一个item.flag他的长度来看有几条
            return this.list.filter(item=>item.flag == false).length
        }
    }
}
</script>
<style>
/* 样式 */
section {
    margin: 0 auto;
}

h2 {
    position: relative;
}

span {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    padding: 0 5px;
    height: 20px;
    border-radius: 20px;
    background: #e6e6fa;
    line-height: 22px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

ol,
ul {
    padding: 0;
    list-style: none;
}

li input {
    position: absolute;
    top: 2px;
    left: 10px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

p {
    margin: 0;
}

li p input {
    top: 3px;
    left: 40px;
    width: 70%;
    height: 20px;
    line-height: 14px;
    text-indent: 5px;
    font-size: 14px;
}

li {
    height: 32px;
    line-height: 32px;
    background: #fff;
    position: relative;
    margin-bottom: 10px;
    padding: 0 45px;
    border-radius: 3px;
    border-left: 5px solid #629a9c;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

ol li {
    cursor: move;
}

ul li {
    border-left: 5px solid #999;
    opacity: 0.5;
}

li a {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 14px;
    border: 6px double #fff;
    background: #ccc;
    line-height: 14px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}
</style>

 然后就是第三个组件选中的数据

<template>
    <div class="xuanzhong">
        <section>
            <h2>已经完成<span>{{ sum }}</span></h2>
            <ul>
                <li v-for="item,index in list" :key="index" v-show="item.flag">
                    <input type="checkbox" v-model="item.flag" />
                    <p>{{ item.title }}</p>
                    <a href="javascript:;" >-</a>
                </li>
            </ul>
        </section>
    </div>
</template>
<script>
export default {
    props:['list'],
    computed:{
        sum(){
            return this.list.filter(item=>item.flag == true).length
        }
    }
}
</script>
<style>
section {
    margin: 0 auto;
}

h2 {
    position: relative;
}

span {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    padding: 0 5px;
    height: 20px;
    border-radius: 20px;
    background: #e6e6fa;
    line-height: 22px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

ol,
ul {
    padding: 0;
    list-style: none;
}

li input {
    position: absolute;
    top: 2px;
    left: 10px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

p {
    margin: 0;
}

li p input {
    top: 3px;
    left: 40px;
    width: 70%;
    height: 20px;
    line-height: 14px;
    text-indent: 5px;
    font-size: 14px;
}

li {
    height: 32px;
    line-height: 32px;
    background: #fff;
    position: relative;
    margin-bottom: 10px;
    padding: 0 45px;
    border-radius: 3px;
    border-left: 5px solid #629a9c;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

ol li {
    cursor: move;
}

ul li {
    border-left: 5px solid #999;
    opacity: 0.5;
}

li a {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 14px;
    border: 6px double #fff;
    background: #ccc;
    line-height: 14px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}
</style>

萱不是渲
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue增删改查(Todo-list简易版)
weixin_57259948的博客
10-03 642
首先了解一下实现流程 首选我们创建一个vue项目，然后通过vuex来存放我们的数据，再定一个初始状态，当我们添加的是时候就加入到我们在vux中定义的空对象,通过id进行删除，通过状态进行筛选 效果实现及思路 1.我们在vue项目中定义个空数据，使用v-model来是双向数据响应，存放我们输入的数据进行赋值，给到我们vuex的空对象中，这里是home页 <template> <div> <h1>todolist</h1&...
Vue增删改查(Todo-list进阶版)
weixin_57259948的博客
10-06 673
效果实现流程： 首先创建一个vue项目，Todo-list总共分三步来写， 头部我们使用input框来实现输入的数据，使用键盘事件点击添加到数据中，使用v-model实现响应式数据， 第二步来进行筛选，是完成还是未完成 我们添加的数据在这里拿到进行渲染，然后我们用css3的属性实现删除的显示和隐藏 代码实现思路： vuex代码实现思路： 我们在vuex中创建一个空对象，在定义一个初始值和初始状态，当我们的全部，然后在用map循环通过id来判断他的状态，是true还是false，实现单选和全选 .
Vue2.0 V1.1版本 增删改查功能，全选单选与取消全选选项，使用localStorage本地存储数据和watch深度监听
07-06
TodoList完善版。Vue2.0 V1.0的增删改查功 全选单选与取消全选选项， 使用了localStorage本地存储数据和watch深度监听数据选项变化。TodoList完善版。 用于学习的小Demo. TodoList 传值学习，父传子 子传孙 子传父 传值等学习，全选计算属性 套娃 事件都在APP.vue中 下载 npm install 启动 npm run serve TodoList目录下是小Demo Lx目录下是某个知识点学习...
使用Vue制作todoList实现增删改
Henry的博客
11-23 965
使用Vue制作todoList
【Vue--todolist（增加,删除）】
m0_70684059的博客
04-07 215
【Vue--todolist】增加，删除
微信小程序学习用demo：todolist：增删改查
03-15
在这个"微信小程序学习用demo：todolist：增删改查"项目中，我们将会探讨微信小程序的基础知识，以及如何构建一个简单的待办事项（Todo List）应用，涉及到的功能包括添加、删除和修改任务。 首先，我们需要理解...
login_push：vue + koa2 + jwt实现单点登录+ todolist增删改查
02-04
Vue + Koa2使用jwt实现单点登录 :wrapped_gift: 2018-12-17 本次更新README主要是把挂掉的图连接补上 从我个人角度来说，我还是蛮喜欢这样的全栈项目的，实践性很足，不一定要看我的代码，完全可以直接去写一个类似...
小程序DEMO——todolist：增删
03-15
在这个“小程序DEMO——todolist：增删”项目中，我们聚焦于一个基本的待办事项（Todo List）应用的实现，重点在于添加和删除功能。这个DEMO是一个很好的学习资源，适合初学者理解和掌握小程序开发的基础知识。 ...
用React实现一个完整的TodoList的示例代码
08-29
React 实现完整的 TodoList 示例代码 本篇文章主要介绍了使用 React 实现一个完整的 TodoList 的示例代码，包括组件的设计、数据结构、父子组件之间的通信等。 一、 TodoList 的功能需求 1. 可以添加任务； 2. 已...
Vue2.0 V1.0 的增删改查功 全选多选 or 取消选项 学习TodoList
07-05
TodoList Vue2.0的增删改查功 全选多选 or 取消选项 用于学习的小Demo. TodoList 传值学习，父传子 子传孙 子传父 传值等学习，全选计算属性 套娃 事件都在APP.vue中 下载 npm install 启动 npm run serve ...
Vue TodoList完整案例
09-05
案例根据 http://todomvc.com/examples/vue/ 编写 完成功能：完成了所有的功能，如：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务、自动聚焦，本地保存等等。
vue实现todolist的增删改查
lxs19930928的博客
12-29 1294
vue实现todolist的目录和效果图 app.vue <template> <div id="app"> <div className='container'> <Inputs @addItem="addItem" @search="search"></Inputs> <List :list="list"></List> <Total @sendCheckAll=
vue3 todolist 增删改查
最新发布
weixin_45567934的博客
07-11 230
span @click=“visibilitry=‘completed’” :class=“{editStyle:visibilitry==‘completed’}”>未完成{{completedSize.length}}已完成{{activeSize.length}}清除已完成。
Vue实现todolist效果（增删改查和本地存储状态）
wzsrlndm的博客
09-28 994
效果图 实现每一项的独特命名来实现删除添加选取的精准操作需要在终端安装nanoid 指令为npm i nanoid并在header页中配置 可以根据功能来拆分组件共可以拆分组件分别为MyHeader MyItem MyFooter添加My的作用主要是用来防止标签与html5中新增标签起冲突，而MyItem中包含MyList组件 组件创建完成后需要在App.vue中注册 App的所有代码 <template> <div id="app"> ...
Vue入门——todoList实例
weixin_44279243的博客
11-11 615
该todoList例子包含基本的增删改查功能。 1.点击插入的时候会将信息添加在下边的列表中展示； 2.点击每行后边的叉号，会删除该条信息； 3.点击列表的信息，会将信息显示在input框中； 运行效果图： 上代码： <template> <div> <el-input v-model="message"></el-input> <el-button @click="insert()">插入</el-bu
Vue clip(实现todolist页面展示+增删功能模块)
咖啡有点苦的博客
11-04 374
使用Vue实现todolist
Vue学习笔记（一）基于Vue2的TodoList待办事项增删查案例 | 基于Node.js 使用Vue-CLI脚手架构建项目
希望每天都能进步一点点
06-19 687
需求案例说明：使用 Vue2模块化编程方式来实现下图的案例（样式是参照教程随便写的，这里以熟悉Vue2为主）项目结构：说明：Vue2支持模块化编程，一个 Vue后缀的文件表示一个Vue组件，其中通常包括 ：1） HTML 代码，即 标签， 2） JS代码，即标签 ，通常是返回 Key-Value 形式的对象，表示一些关于Vue组件的参数，包括变量和函数。 3）CSS样式代码，即 标签，通常使用 scoped 限制样式只在当前组件内有效。 根据界面可将这个Todo案例分为三个模块，分别是 Header、Bod
适合前端初学者，vue.js完成ToDoList的增删改，支持回车提交增加，及修改时自动获取焦点
Phoebe的学习天地
12-28 685
适合前端初学者，vue.js完成ToDoList的增删改，支持回车提交增加，及修改时自动获取焦点
待办事项系统增删改查功能实现代码java
05-14
以下是一个基本的待办事项系统的增删改查功能实现代码的 Java 版本： ```java import java.util.ArrayList; import java.util.Scanner; public class TodoList { private ArrayList<String> todoList; public TodoList() { todoList = new ArrayList<String>(); } public void addTodoItem(String item) { todoList.add(item); } public void deleteTodoItem(int index) { todoList.remove(index); } public void editTodoItem(int index, String newItem) { todoList.set(index, newItem); } public void printTodoList() { System.out.println("当前待办事项："); for (int i = 0; i < todoList.size(); i++) { System.out.println((i+1) + ". " + todoList.get(i)); } System.out.println(); } public static void main(String[] args) { TodoList todoList = new TodoList(); Scanner scanner = new Scanner(System.in); int choice = 0; while (choice != 5) { System.out.println("请选择操作："); System.out.println("1. 添加待办事项"); System.out.println("2. 删除待办事项"); System.out.println("3. 编辑待办事项"); System.out.println("4. 显示待办事项"); System.out.println("5. 退出程序"); choice = scanner.nextInt(); scanner.nextLine(); switch (choice) { case 1: System.out.println("请输入待办事项："); String newItem = scanner.nextLine(); todoList.addTodoItem(newItem); break; case 2: System.out.println("请输入要删除的待办事项编号："); int indexToDelete = scanner.nextInt() - 1; todoList.deleteTodoItem(indexToDelete); break; case 3: System.out.println("请输入要编辑的待办事项编号："); int indexToEdit = scanner.nextInt() - 1; scanner.nextLine(); System.out.println("请输入新的待办事项内容："); String newContent = scanner.nextLine(); todoList.editTodoItem(indexToEdit, newContent); break; case 4: todoList.printTodoList(); break; case 5: System.out.println("程序已退出"); break; default: System.out.println("无效的选择，请重新选择"); break; } } scanner.close(); } } ``` 这个程序通过 Scanner 类从控制台获取用户输入，并使用 ArrayList 存储待办事项。用户可以通过输入数字选择不同的操作，例如添加、删除、编辑和显示待办事项。程序将用户的选择映射到不同的方法，这些方法通过操作 ArrayList 来实现增删改查功能。程序将一直运行，直到用户选择退出。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值