【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>
相关推荐
草堂春睡足11 分钟前
【Datawhale AI夏令营】科大讯飞AI大赛(大模型技术)/夏令营:让AI理解列车排期表
人工智能·笔记
关羽的小刀12 分钟前
Element-UI最新版暗藏Lodash漏洞?一次真实项目安全排查记录
前端
张志鹏PHP全栈12 分钟前
Vue3第五天,ref 和 reactive的介绍和区别
前端·vue.js
郭邯14 分钟前
import.meta对象是什么?
前端
用泥种荷花30 分钟前
【NPM 笔记(一)】NPM 入门知识:命令、依赖与脚本核心
前端
大巨头31 分钟前
在vscode中使用通义灵码插件记录分享
前端
淮北49431 分钟前
STL学习(四、队列和堆栈)
开发语言·c++·学习
江城开朗的豌豆33 分钟前
Vue/React凭什么吊打传统前端?6年老司机带你揭秘它们的性能杀招!
前端·javascript·vue.js
江城开朗的豌豆34 分钟前
虚拟DOM:为什么React/Vue比直接操作DOM快10倍?
前端·javascript·vue.js
mrsk35 分钟前
JavaScript中的大数相加是怎么突破数字的极限的?
前端·javascript·面试