【Vue】案例——To do list:

【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部分

html 复制代码
<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部分

html 复制代码
<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样式部分

html 复制代码
    <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整体代码如下:
html 复制代码
<!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>
相关推荐
杨进军17 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW32 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
-凌凌漆-37 分钟前
【Qt】QStringLiteral 介绍
开发语言·qt
程序员爱钓鱼37 分钟前
Go语言项目工程化 — 常见开发工具与 CI/CD 支持
开发语言·后端·golang·gin
说码解字38 分钟前
Kotlin lazy 委托的底层实现原理
前端
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956391 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
军训猫猫头1 小时前
1.如何对多个控件进行高效的绑定 C#例子 WPF例子
开发语言·算法·c#·.net
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js