用Vue仿做ToDoList

最新推荐文章于 2024-04-08 15:45:39 发布
最新推荐文章于 2024-04-08 15:45:39 发布
阅读量171 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38722696/article/details/111565648
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDoList</title>
</head>
<style>
    body{
        background-color: #DDDDDD;
    }
    header{
        background-color:black;
        }
    main{
        width: 620px;
        margin: 0 auto;
        padding: 0;    
    }
    header main{
        display: flex;
            justify-content: space-between;
    }
    header main p{
        color: #DDDDDD;
    }
    header main input{
        width: 364px;
        height: 30px;
        margin-top: 8px;
    }
    .top main .conduct{
        display: flex;
        justify-content: space-between;
    }
    ol{
        list-style:none;
        display: flex;
        justify-content: space-between;
    }
    .bottom main .finish{
        display: flex;
        justify-content: space-between;
    }
    footer main{
        display: flex;
        justify-content: center;
    }
    footer main em{
        color:#CDCDCD;
    }
</style>
<body>
<div id="app">
   
        <!-- 头部 -->
        <header >
            <main>
                <p>ToDoList</p>
                <input  
                type="text"
                placeholder="添加ToDoList"  
                v-model.trim='task' 
                @keyup.enter='keyHandle'>
            </main>
        </header>

<!-- 列表 -->
        <!-- 正在进行 -->
        <div class="top">
            <main>
                <div class="conduct">
                    <h2>正在进行</h2>
                    <h2 v-text='list1.length'></h2>
                </div>
                <ol  v-for='(item,index) in list1' >
                    <li>
                        <input type="checkbox" @click.prevent='transform(index, true)'/> 
                    </li>

                    <li>
                        <input v-model.trim='item.task'>
                    </li>

                    <li>
                        <button @click='remove(index, true)'>-</button>
                    </li>
                </ol>
            </main>
        </div>


        <!-- 已完成 -->
        <div class="bottom">
            <main>
                <div class="finish">
                    <h2>已经完成</h2>
                    <h2 v-text='list2.length'></h2> 
                </div>
                <ol v-for='(item,index) in list2'>
                    <li>
                        <input checked type="checkbox" @click.prevent='transform(index)'/>
                    </li>
                    <li>
                        <input v-model.trim='item.task' /> 
                    </li>
                    <li>
                        <button @click='remove(index)'>-</button>
                        
                    </li>
                </ol>
            </main>
        </div>



        <footer>
            <main>
                <span>Copyright © 2014 todolist.cn</span>
                <em @click.prevent='clear'>清空</em>
            </main>
        </footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src=""></script>
<script>
    var app = new Vue({
  el: '#app',
 
  data: {
    task: '',
    list1: [],
    list2: []
  },
  methods: {
    keyHandle() {
      console.log('task', this.task)
      if(this.task) {
        this.list1.push({id: Date.now(), task: this.task})
      }
      this.task = ''
    },
    transform(index, flag) {
      if(flag) {
        this.list2 = this.list2.concat(this.list1.splice(index, 1))
      }else{
        this.list1 = this.list1.concat(this.list2.splice(index, 1))
      }
    },
    remove(index, flag) {
      if(flag) {
        this.list1.splice(index, 1)
      } else {
        this.list2.splice(index, 1)
      }
    },
    clear() {
      this.list1 = []
      this.list2 = []
    }
  }
})
</script>
</body>
</html>
海马体加强中
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue：实现TodoList案例（尚硅谷）
做一只猫的博客
08-04 9516
TodoList案例
Vue 实现 TodoList 的 6 种方式
GitChat
10-12 527
Vue 作为三大流行框架之一，在国内有着较为广泛的应用群体。深入学习 Vue，熟练使用 Vue 无疑可以增加个人不管是求职还是工作的筹码。 在本场 Chat 中，会涉及到如下内容： Vue 的基本指令 v-model、v-for 实现 TodoList Vue 的组件化结合 watch 实现 TodoList Vue 的组件化结合自定义事件实现 TodoList Vue 的组件化结合父元素绑定点...
用vue.js写案例——ToDoList待办事项 （步骤和全码解析）
最新发布
m0_73490019的博客
04-08 7012
首先在ToDoMain组件中声明并触发自定义事件，传递参数 6 id，接着在App组件中监听自定义事件，当自定义事件被触发时，执行对应的方法，进 行删除操作，删除任务的具体实现步骤如下。单击切换状态区域时，默认状态为all，即显示全部任务，当状态切换为active时， 显示未完成的任务，当状态切换为completed时，显示已完成的任务。② 新建并封装组件。App 组件为根组件，数据在App组件中，现在需要将App根组件中的初始数据传递 到列表区域，ToDoMain组件中。
vuex + elementui实现一个Todolist应用
weixin_44550463的博客
10-27 1824
1
用 Vue 构建 TodoList 案例
可爱不能当饭吃
12-03 2785
目录 一、构思组件 二、布置静态页面 三、功能实现 1. MyHeader.vue 组件 2. MyList.vue 组件 3. MyItem.vue 组件 4. MyFooter.vue 组件 5. App.vue 组件 四、总结 这是学 Vue 来做的第一个比较完整的案例，可以说是前面知识点的验收阶段，不得不说，边学边忘，果然还是靠练习。怎么说，用Vue 框架实现 TodoList 的思路和以前操作 Dom 元素时做的有异曲同工之妙，但是...
Vue小demo todoList记事本
10-14
在这个名为"Vue小demo todoList记事本"的项目中，开发者利用Vue.js创建了一个简单的待办事项应用，具备在浏览器中存储数据、适应不同手机屏幕尺寸以及包含动态视觉效果的功能。下面将详细探讨这个项目涉及的Vue.js...
vue实现todolist功能、todolist组件拆分及todolist的删除功能
10-17
在这个教程中，我们将探讨如何使用Vue实现一个基本的待办事项（TodoList）功能，包括组件拆分和删除功能。 首先，让我们看一个简单的TodoList功能的实现。在HTML中，我们有一个`<input>`元素和一个提交按钮，它们...
vue2案例todolist
05-23
在本Vue2案例“todolist”中，我们将深入探讨Vue.js框架的核心概念和技术，以便创建一个简单的待办事项管理应用。Vue.js是一个轻量级、高性能的前端JavaScript框架，广泛用于构建用户界面。以下是该案例涉及的主要...
vue + vuex todolist的实现示例代码
08-27
总的来说，这个示例展示了如何使用Vue.js和Vuex构建一个简单的todolist应用，涵盖了组件化开发、状态管理和事件处理等方面的知识。通过学习和实践这个示例，开发者能够加深对Vue.js和Vuex的理解，提升其前端开发技能...
vue3-todo-list:vue3 todolist示例
03-09
在Vue3-TodoList项目中，你还可以学习到如何使用Vuex（尽管未明确提及）进行状态管理，以及如何利用 vite 或 webpack 进行构建配置。此外，项目可能还包含了测试和持续集成的实践，帮助开发者确保代码的质量和稳定性...
ToDoList:创建您需要完成的任务列表，包括带有本地存储的项目文件夹！
03-21
待办事项清单 创建您需要完成的任务列表，包括带有本地存储的项目文件夹！
用React实现一个完整的TodoList的示例代码
08-29
本篇文章主要介绍了用React实现一个完整的TodoList的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
用Vue写一个todolist功能
qq_44820039的博客
07-30 2428
今天打算用Vue来完成一个todolist的小案例，如下图： 功能分析 首先看看有什么功能，要用什么方法完成 在文本框输入待办事项，按下回车事项会添加到正在进行下面 任务完成点击左边的复选框，事项会添加到已经完成的任务 如果任务取消，点击右边的横杠删除即可 如何实现功能 要完成上面的第一个功能，按下回车添加任务 ...
Vue之ToDoList实战
热门推荐
wu__di的博客
02-08 1万+
之前的文章windows下搭建vue开发环境，我们已经搭建好了vue的环境，并且写了Vue系列之WebPack与Eslint，对vue项目的整体情况有了了解，这篇文章我们就来练习一下vue，实现ToDoList项目。 以下是我们的项目目录结构： 请点击此处输入图片描述 在这个ToDoList当中，涉及到知识点包括以下内容: 1、创建Vue实例： 在main
前端笔记之Vue（五）TodoList实战&拆分store&跨域&练习代理跨域
RopeHuo
05-19 578
前端笔记之Vue（五）TodoList实战&拆分store&跨域&练习代理跨域 一、TodoList 1.1安装依赖 安装相关依赖： npm install --save-dev webpack npm install --save-dev babel-loader babel-core babel-preset-es20...
利用Bootstrap+Vue+Flask 制作一个todolist
crazy_banana的博客
02-22 7172
利用Bootstrap+Vue+Flask，快速完成一个包含前后端的todolist应用。
vue实现todoList
wo139472的博客
07-11 510
三部分实现todoList //todoHeader组件 <template> <div> //数据双向绑定,trim去除空格,keyup实现按回车键添加一条todo列表 <input v-model.trim="text" @keyup.enter="addTodo"> <button @click="addTodo">addtodo</button> </div> </
手把手叫你做ToDoList
码媛小洋的博客
08-17 7333
ToDoList案例：案例介绍 文本框里面输入内容，按下回车，就可以生成待办事项。 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。 但是本页面内容刷新页面不会丢失。 toDoList 分析以及注意点 刷新页面不会丢失数据，因此需要用到本地存储 localStorage。 核心思路： 不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据。 存储的数据格式：var todolist =
使用Vue3实现todolist的添加和删除。
07-15
你可以按照以下步骤使用Vue 3来实现todolist的添加和删除功能： 1. 首先，在你的Vue项目中安装Vue 3。你可以使用npm或者yarn来安装它： ``` npm install vue@next ``` 或者 ``` yarn add vue@next ``` 2. 在你的Vue组件中，创建一个data属性来存储todo列表和输入框的值： ```javascript data() { return { todos: [], newTodo: '' } } ``` 3. 创建一个方法来添加todo到列表中： ```javascript methods: { addTodo() { if (this.newTodo.trim() !== '') { this.todos.push(this.newTodo); this.newTodo = ''; } } } ``` 4. 创建一个方法来删除todo： ```javascript methods: { deleteTodo(index) { this.todos.splice(index, 1); } } ``` 5. 在模板中，使用v-model指令来绑定输入框的值，并使用v-for指令来循环渲染todo列表： ```html <input type="text" v-model="newTodo"> <button @click="addTodo">Add</button> <ul> <li v-for="(todo, index) in todos" :key="index"> {{ todo }} <button @click="deleteTodo(index)">Delete</button> </li> </ul> ``` 现在，当你在输入框中输入内容并点击"Add"按钮时，该内容将会被添加到todo列表中。当你点击"Delete"按钮时，对应的todo将会被从列表中删除。 希望这个例子能帮助你实现Vue 3中todolist的添加和删除功能！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值