【Vue】案例——To do list：

已于 2025-04-13 14:11:46 修改
阅读量1k 收藏 21
点赞数 24
分类专栏： Vue 文章标签： vue.js list 前端 开发语言 javascript 笔记
于 2025-04-11 22:58:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Swc123456789/article/details/147155814
版权

【Vue】案例——To do list：

一、案例介绍：

这个案例是一个简单的待办事项列表（To Do List）应用，使用了 Vue.js 框架来实现动态数据绑定和交互功能。用户可以在输入框中输入待办事项，并通过点击“增加”按钮将其添加到列表中。待办事项会以列表的形式展示在页面上，用户还可以通过点击“删除”链接来移除特定的事项。

二、效果展示（如图）

在这里插入图片描述

三、主要功能：

1.添加待办事项：用户输入内容并点击“增加”按钮，内容会被添加到待办事项数组中；
2.删除待办事项：用户可以点击每个事项旁边的“删除”链接来移除该事项；
3.输入验证：在添加事项时，应用会检查输入是否为空或是否已存在于列表中，并给出相应的提示；

四、技术要点：

1.使用 Vue.js 进行数据绑定和事件处理；
2.利用 v-model 指令实现输入框与数据的双向绑定；
3.使用 v-for 指令动态渲染待办事项列表；

补充：【Vue】Vue模板语法(点击可跳转)

补充：【Vue】数据绑定（单双向）(点击可跳转)

五、代码解析：

1.body部分

在这里插入图片描述

<body>
    <div id='app'>
        <div class="box">
            <!-- 
                如何获取输入框内容，如何将获取到的内容展示到页面上 
                【将内容保存到数组中去】
            -->
            <h3>To do list</h3>
            <div class="list_con">
                <input type="text" v-model="txt">
                <button @click="add()">增加</button>
            </div>

            <div class="list">
                <!-- 
        连续出现的标签、标签块
        1.将标签、标签块重写一遍
        2.将重复出现的标签、标签块里面的“内容”保存到数组中去
        3.将v-for写在重复出现标签、标签块身上
     -->
                <ul>
                    <li v-for="item in arr">
                        <span>{{item}}</span>
                        <!-- 点击删除时候如何指定元素 -->
                        <a href="javascript:;" @click="del(index)">删除</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</body>

2.script部分

在这里插入图片描述

<script>
    new Vue({
        el: '#app',
        data: {
            txt: "",    // 保存input框的内容
            arr: ["学习html", "学习css", "学习javascript"]
        },
        methods: {
            // 增加功能
            add() {
                // this.txt    // 输入框输入的内容
                // push:将内容添加到数组最后一项   pop:删除数组最后一项
                // unshift:将内容添加到数组最前面一项   shift:删除数组最前面一项
                if (this.txt.trim() == '') {
                    alert("请输入内容，再进行添加！")
                    return
                } else if (this.arr.includes(this.txt.trim())) {
                    alert("该内容已存在，请重新输输入其他内容")
                    this.txt = ''
                } else {
                    this.arr.unshift(this.txt)
                    this.txt = ''
                }
            },
            // 删除功能
            // 定义函数给形参，调用函数给实参
            del(index) {
                // splice(操作的元素的索引值，删除个数，添加的内容)
                this.arr.splice(index, 1);
            }
        }
    })
</script>

3.CSS样式部分

在这里插入图片描述

    <style>
        .box {
            margin: 10px auto;
            width: 600px;
        }

        .list_con input {
            width: 540px;
        }

        .list ul {
            padding: 0;
        }

        .list li {
            list-style: none;
            border-bottom: 1px solid #ccc;
            padding: 15px 0;
        }

        .list li a {
            float: right;
            text-decoration: none;
        }
    </style>
  • 案例——To do list整体代码如下：
<!DOCTYPE html>
<html>

<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>To do list2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <style>
        .box {
            margin: 10px auto;
            width: 600px;
        }

        .list_con input {
            width: 540px;
        }

        .list ul {
            padding: 0;
        }

        .list li {
            list-style: none;
            border-bottom: 1px solid #ccc;
            padding: 15px 0;
        }

        .list li a {
            float: right;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div id='app'>
        <div class="box">
            <!-- 
                如何获取输入框内容，如何将获取到的内容展示到页面上 
                【将内容保存到数组中去】
            -->
            <h3>To do list</h3>
            <div class="list_con">
                <input type="text" v-model="txt">
                <button @click="add()">增加</button>
            </div>

            <div class="list">
                <!-- 
        连续出现的标签、标签块
        1.将标签、标签块重写一遍
        2.将重复出现的标签、标签块里面的“内容”保存到数组中去
        3.将v-for写在重复出现标签、标签块身上
     -->
                <ul>
                    <li v-for="item in arr">
                        <span>{{item}}</span>
                        <!-- 点击删除时候如何指定元素 -->
                        <a href="javascript:;" @click="del(index)">删除</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</body>
<script>
    new Vue({
        el: '#app',
        data: {
            txt: "",    // 保存input框的内容
            arr: ["学习html", "学习css", "学习javascript"]
        },
        methods: {
            // 增加功能
            add() {
                // this.txt    // 输入框输入的内容
                // push:将内容添加到数组最后一项   pop:删除数组最后一项
                // unshift:将内容添加到数组最前面一项   shift:删除数组最前面一项
                if (this.txt.trim() == '') {
                    alert("请输入内容，再进行添加！")
                    return
                } else if (this.arr.includes(this.txt.trim())) {
                    alert("该内容已存在，请重新输输入其他内容")
                    this.txt = ''
                } else {
                    this.arr.unshift(this.txt)
                    this.txt = ''
                }
            },
            // 删除功能
            // 定义函数给形参，调用函数给实参
            del(index) {
                // splice(操作的元素的索引值，删除个数，添加的内容)
                this.arr.splice(index, 1);
            }
        }
    })
</script>

</html>
JavaScript页面设计案例——待办事项（Todo List）应用
ZXY_ZXR的博客
10-22 1555
这段HTML代码定义了一个简单的待办事项列表页面，包括输入框、按钮和无序列表。通过引入外部CSS和JavaScript文件，页面可以实现样式美化以及动态的待办事项管理功能。这段CSS代码定义了一个简洁、美观的待办事项列表页面的样式。通过设置字体、背景、边框、圆角、阴影等属性，使页面元素看起来更加现代和整洁。此外，通过伪类选择器和类选择器，实现了按钮的悬停效果和完成任务的样式变化，增强了用户体验。用户可以输入待办任务并点击“添加”按钮。如果输入内容为空，则弹出警告。
Vue第一天学习总结—— Vue全家桶之Vue基础(Vue概述、Vue基本使用、Vue模板语法、基础案例——选项卡、Vue常用特性、综合案例-图书管理 )
weixin_52819925的博客
08-26 634
(一) Vue概述 我使用的vue版本是v2.5.17 1. 介绍——Vue：渐进式JavaScript框架 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue 灵活：在一个库和一套完整框架之间自如伸缩 高效：20kB运行大小，超快虚拟 DOM 框架：vue就是一个框架，提供了很多基础性服务，比如虚拟DOM技术，双向绑定技术 框架则是为解决一个(一类)问题而开发的产品 （是一个解决方案） 使用框架就不一样，我
vue项目例子
03-15
这是一个完整的项目的案例，关于一个微信公众号的，从项目的部署开始各个页面都有。
vue实例
weixin_33759269的博客
03-02 127
1、构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的： var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模式， Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm 这个变量名表示 Vue 实例。 在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等...
Vue案例
qq_54250695的博客
01-11 1531
vue案例练手
一个VUE的小案例
weixin_30432007的博客
04-26 128
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
Vue实例-Todo-list案例
anxiangzsq的博客
08-10 1506
基本效果图组件化编码流程(通用)1.实现静态组件:抽取组件，使用组件实现静态页面效果2.展示动态数据:2.1.数据的类型、名称是什么?2.2.数据保存在哪个组件?3.交互一从绑定事件监听开始。
09-Vue技术栈（TodoList案例）
Zhang_wang_yun的博客
05-06 1718
基于Vue开发的一个记事本待办事项案例
vue.js实例todoList项目
10-19
<h1>TO DO LIST ! <todo-list></todo-list> ``` 总结来说，这个Vue.js `todoList`项目展示了如何创建一个简单的待办事项列表，包括数据的定义、列表的渲染、事件监听以及数据驱动的视图更新。通过这个实例，...
Vue 基础入门
热门推荐
我的的博客哦
05-17 2万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
vue案例
qq_45387575的博客
09-19 462
关键：先将用户输入的数据，利用回车作为切割符，转换为数组后，再利用Math.random产生最忌数，来获取数组的下标，再将挑选出来的数据进行显示。textarea输入的数据，按照空格分行之后，怎么获取每个元素：this.inputdata.split('\n')怎么将date类型的input标签绑v-model的value。1、收集用输入的随机选择的个数--v-model 进行绑定。怎么将date类型的input的时间转换为时间戳。2、收集用户输入的数据--监听回车事件。计算时间戳的时候有点迷糊。
vue 案例
SICAUliuy的博客
12-02 318
文章目录vue 案例Tab选项卡案例图书管理案例 vue 案例 Tab选项卡案例 选择对应tab标签，切换图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
Vue小案例（一）
SAKURAjinx的博客
10-18 1439
那么就需要v-if 来进行条件渲染，注意这里不用v-show，因为v-show只是控制元素的显示隐藏，而不会真正控制元素节点的创建删除。创建图示这么个成绩表，包含三个科目及其编号成绩，显示总分和平均分，并可以进行添加成绩和删除成绩的操作(删除所有数据后显示暂无数据)。删除就是将bookList对应的数组元素删除，那么del方法需要接收参数来确定删除哪一项。现在有5张图片，我想通过点击上一张 / 下一张的按钮来进行图片切换。当上一张到第1张位置时，再点上一张会出错，同样的下一张也是。6、计算总分、平均分。
【vue小案例】
最新发布
qq_47168657的博客
11-06 616
vue的双for循环案例，表格案例，选项卡切换发布评论案例
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值