Vue版todolist案例

最新推荐文章于 2023-07-04 17:24:53 发布
最新推荐文章于 2023-07-04 17:24:53 发布
阅读量2.9k 收藏 5
点赞数 1
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cool_breeze_/article/details/108786381
版权

Vue版todolist案例

todolist – 记录你的待办事项

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue版todolist案例</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            #app{
                width: 100vw;
                height: 100vh;
                background: #CDCDCD;
            }
            /* 头部样式 */
            header{
                height: 50px;
                background: rgba(47,47,47,0.98);
                line-height: 50px;
            }
            section{
                width: 80vw;
                margin: 0 auto;
            }
            label{
                float: left;
                color: #DDD;
                font-size: 24px;
                font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            }
            section > input{
                height: 24px;
                width: 60%;
                float: right;
                margin-top: 15px;
                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;
            }
            /* 内容样式 */
            h2{
                position: relative;
                margin: 20px 0;
            }
            .todocount{
                display: inline-block;
                position: absolute;
                right: 5px;
                top: 2px;
                height: 20px;
                padding: 0 5px;
                border-radius: 20px;
                line-height: 22px;
                background: #E6E6FA;
                color: #666;
                font-size: 14px;
                text-align: center;
            }
            ol{
                padding: 0;
                list-style: none;
            }
            ol 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);
            }
            li > input{
                position: absolute;
                top: 6px;
                left: 10px;
                width: 22px;
                height: 22px;
                cursor: pointer;
            }
            li > a{
                position: absolute;
                right: 5px;
                top: 2px;
                display: inline-block;
                background: #CCC;
                width: 25px;
                height: 25px;
                border-radius: 14px;
                border: 6px double #fff;
                line-height: 14px;
                text-align: center;
                color: #fff;
                font-weight: bold;
                font-size: 14px;
                cursor: pointer;
            }
            footer {
                text-align: center;
                color: #666;
            }
            footer > a{
                text-decoration: none;
                color: #999;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 首部 -->
            <header>
                <section>
                    <label>ToDoList</label>
                    <!-- autocomplete="off" -- 禁用自动完成 -->
                    <input v-model="addTodo"  @keydown.enter="addTodoEvent" type="text" name="title" id="title" placeholder="添加ToDo" required="required" autocomplete="off" />
                </section>
            </header>
            <!-- 内容 -->
            <section>
                <!-- {{ todoings }}
{{ checkTodos }} -->

                <h2>
                    正在进行
                    <span class="todocount">{{ todoingsLength }}</span>
                </h2>
                <ol>
                    <li v-for="todoing,index in todoings" :key="index">
                        <!-- 将选中的任务依次添加到checkTodos数组中 -->
                        <input @click="toDoEvent(index)" v-model="checkTodos" type="checkbox" name="todoing" :value="todoing" />
                        <p>{{ todoing }}</p>
                        <a @click="removeTodoEvent(index)" href="javascript:;" :data-id="index">-</a>
                    </li>
                </ol>
                <h2>
                    已经完成
                    <span class="todocount">{{ checkTodosLength }}</span>
                </h2>
                <ol>
                    <li v-for="checkTodo,index in checkTodos" :key="index">
                        <!-- 将选中的任务依次添加到todoings数组中 -->
                        <input @click="DotoEvent(index)" v-model="todoings" type="checkbox" name="done" :value="checkTodo" disabled />
                        <p>{{ checkTodo }}</p>
                        <a @click="removeDotoEvent(index)" href="javascript:;" :data-id="index">-</a>
                    </li>
                </ol>
            </section>
            <!-- 底部 -->
            <footer>
                ©2020 Continue.Run
                <a href="">clear</a>
            </footer>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = new Vue({
                el: "#app",
                data: {
                    // 添加todo - 把输入框的值和adTodo绑定在了一起，输入框的值变了，addTodo就会改变
                    addTodo: "",
                    // 正在进行的任务数组，由addTodo添加数据
                    todoings: ["用Vue完成todolist案例","第二条"],
                    checkTodos: [],
                    // 是否显示正在进行的ToDo
                    showTodoing: true,
                    // 是否显示已经完成的ToDo
                    showTodone: true
                },
                computed: {
                    // 返回正在进行(todoings)数组的长度的计算函数
                    todoingsLength: function(){
                        return this.todoings.length;
                    },
                    // 返回已经完成(checkTodos)数组的长度的计算函数
                    checkTodosLength: function(){
                        return this.checkTodos.length;
                    }
                },
                methods: {
                    addTodoEvent: function(){
                        console.log("添加ToDo");
                        // 在正在进行添加todo
                        this.todoings.push(this.addTodo)
                        // 添加完成之后清空输入框的文字
                        this.addTodo = ""
                    },
                    removeTodoEvent: function(index){
                        // 把对应的索引传过来
                        // 删除正在进行(todoings)中的Todo
                        console.log(index);
                        console.log("删除ToDo");
                        // 删除todoings中的指定内容
                        this.todoings.splice(index,1)
                    },
                    removeDotoEvent: function(index){
                        // 把对应的索引传过来
                        // 删除正在进行(todoings)中的Todo
                        console.log(index);
                        console.log("删除ToDo");
                        // 删除todoings中的指定内容
                        this.checkTodos.splice(index,1)
                    },
                    toDoEvent: function(index){
                        // 从正在进行移到已经完成
                        // this.checkTodos.push(this.todoings[index])
                        // this.todoings.splice(index,1)		
                    },
                    DotoEvent: function(index){
                        // 从已经完成移到正在进行
                        // this.todoings.push(this.checkTodos[index])
                        // this.checkTodos.splice(index,1)
                    }
                },
            })
        </script>
    </body>
</html>

效果图：

码小余の博客
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue实现TodoList任务列表案例
m0_57101855的博客
05-28 2028
一、初始化vite项目： 二、梳理项目结构： 1）重置index.css中的全局样式； 2）重置App.vue组件的代码结构 三、封装TodoList组件： 1）创建并注册TodoList组件 2）渲染列表组件（基于boorstrap) 1.在 main.js 入口文件中，导入 bootstrap.css 样式表。 2.在 App 组件中通过 list 属性，将数据传递到 TodoList 组件之中，为了接受外界传递过来的列表数据，需要在 TodoList 组件中声明props 属性。 3
【Vue】高级系列（五）Vue模块化实战-demo2-任务清单todoList
YK菌的博客
02-21 2849
Vue实战todolist
Vue TodoList案例
09-02
案例根据 http://todomvc.com/examples/vue/ 编写 完成功能：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务等等。
Vue TodoList完整案例
09-05
案例根据 http://todomvc.com/examples/vue/ 编写 完成功能：完成了所有的功能，如：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务、自动聚焦，本地保存等等。
Vue实现todoList（任务计划列表）
热门推荐
冰雪为融的博客
07-14 3万+
大致功能：1、在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加）2、动态计算有几个未完成的任务3、点击复选框，实现选中或不选中效果（即完成或未完成）4、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表5、双击列表中的内容，可对列表内容进行编辑编辑完成后，按enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑如果想要取消修改，按esc键即可取...
Vue3.0实现一个任务清单ToDoList & vue3小练习
m0_52952413的博客
01-10 1180
## 功能包含 任务增加 任务查找 点击任务切换任务状态 下方按钮实现任务展示切换 总而言之实现了任务的增改查 template代码： <template> <div class="container"> <h2>任务计划表</h2> <!-- 添加框 --> <div class="add"> 添加任务：<input v-model="taskModel"
用vue制作一个任务清单（todoList）
最新发布
qq_55299191的博客
07-04 760
用vue制作一个任务清单（todoList）
本地储存(设置和获取信息)
weixin_33755554的博客
12-14 392
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
Vue.js小Demo--todoList待办事项清单
404_Not__Found
11-29 852
通过Vue的基本方法实现一个todoList，功能包括增加事项，删除事项。
todoList案例（vue版本）之删除todo（全局事件总线实现）
richest_qi的博客
05-12 272
文章目录App.vue（App组件）Item.vue（Item组件）相关链接 代码更改涉及的文件有， App.vue，即App组件。 Item.vue，即Item组件。 注意，入口文件main.js已在beforeCreate()生命周期函数中通过Vue.prototype.$bus=this注册了全局事件总线。 App.vue（App组件） 生命周期函数mounted()中注册监听deleteTodo事件，deleteTodo事件一旦发生，监听回调this.deleteTodo将执行。 生命周期函数b
vue3+ts入门（todolist案例）
02-10
vue3+ts入门（todolist案例）
Vue实现todolist删除功能
08-27
主要介绍了Vue实现todolist删除功能,，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue-todolist案例
03-08
vue款框架简单的记事本案例
vue新版router.addRoute基础用法
码小余の博客
05-24 2万+
vue新版router.addRoute基础用法 新版Vue Router中用router.addRoute来替代原有的router.addRoutes来动态添加路由、子路由 在添加子路由的时候 比如原现有路由 const routes = [ { path: '/', name: 'Login', component: () => import(/* webpackChunkName: "about" */ '@/views/Login.vue
Vue首屏加载白屏问题及解决方案
码小余の博客
08-12 8504
Vue首屏加载白屏问题及解决方案 首先说一下首页加载为什么会白屏? 先说下 SPA 单页面的加载过程 首先就是 html ,也就是 FP 阶段 FP（全称“First Paint”，翻译为“首次绘制”） 是时间线上的第一个“时间点”，它代表浏览器第一次向屏幕传输像素的时间，也就是页面在屏幕上首次发生视觉变化的时间。 注意：FP不包含默认背景绘制，但包含非默认的背景绘制。 <div id="app"></div> 页面在导航后首次呈现出不同于导航前内容的时间点,有一个东西回来
网易云音乐项目
码小余の博客
12-06 8023
网易云音乐项目 壹之章 - 准备 1. 项目描述 （1）此项目为一个前后台分离的仿网易云音乐项目的 SPA （2）包括 发现音乐 / 视频 / 朋友 / 直播 / 私人FM 等功能模块 （3）前端：使用 Vue 全家桶 + iView + Axios + ES6 + Webpack 等技术 （4）后端：使用网易云音乐 API （5）采用模块化、组件化、工程化的模式开发 2. 项目功能界面 3. 技术选型 4. 前端路由 5. API/接口 网易云音乐 NodeJS 版 API (binaryify
Vue在组件上使用v-model
码小余の博客
11-01 7275
Vue在组件上使用v-model 自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住： <input v-model="searchText"> 等价于： <input :value="searchText" @input="searchText = $event.target.value" > 当用在组件上时，v-model 则会这样： <custom-input :value="searchText" @input="searchTex
从零打造 Vue 聊天组件
码小余の博客
04-06 4943
啥都不会 最近听说了那个 socket.io，感觉就很吊，就学习了一下 什么是 socket.io 要理解 socket.io，不得不谈谈WebSocket 在 HTML5 之前呢，因为 [http 协议是无状态的](#http 协议是无状态的)，要实现浏览器与服务器的实时通讯，如果不使用 flash、applet 等浏览器插件的话，就需要定期轮询服务器来获取信息。这造成了一定的延迟和大量的网络通讯。随着 HTM5 的出现，这一情况有望彻底改观，它就是 WebSocket。 什么是 http 无状态协议
CSS transform 使 fixed 定位失效？
码小余の博客
04-01 4693
CSS transform 使 fixed 定位失效？ 1. 最终实现效果如下 看似简单的一个动画，却出现了种种bug，也不叫bug，毕竟是W3C官方的嘛，整整耗费了我一下午的时间去搞它。 2. 布局样式（关键点） 先来看一下我的布局吧 首先 index_bar_container 是 cl_header 的父元素（坑） 就先看这个父子关系吧，其他的都一样了 <!-- 收藏位置弹窗 start --> <div v-if="show" :class="isShow ? 'in
vue todolist案例
05-11
可以参考以下代码实现一个简单的 Vue TodoList： ``` <template> <div class="todo-list"> <h1>Vue TodoList</h1> <form @submit.prevent="addItem"> <input type="text" v-model="newItem" placeholder="Add item..."> <button type="submit">Add</button> </form> <ul> <li v-for="(item, index) in items" :key="index"> <span>{{ item }}</span> <button @click="deleteItem(index)">Delete</button> </li> </ul> </div> </template> <script> export default { data() { return { newItem: '', items: [] } }, methods: { addItem() { if (this.newItem !== '') { this.items.push(this.newItem); this.newItem = ''; } }, deleteItem(index) { this.items.splice(index, 1); } } } </script> <style> .todo-list { margin: 0 auto; max-width: 600px; } ul { list-style: none; margin: 0; padding: 0; } li { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } button { background-color: #f44336; color: #fff; border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer; } button:hover { background-color: #d32f2f; } input[type="text"] { padding: 10px; border-radius: 5px; border: 1px solid #ccc; margin-right: 10px; font-size: 16px; } </style> ``` 在这个 TodoList 中，我们使用了 `v-model` 指令绑定 `newItem` 变量，通过 `addItem` 方法向 `items` 数组中添加新的项目，并使用 `v-for` 指令渲染出每个项目。同时，在每个项目中，我们添加了一个 `Delete` 按钮，用于删除对应的项目。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码小余の博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值