使用vue完成todolist小案例

最新推荐文章于 2023-08-10 10:19:27 发布

jiacchen

最新推荐文章于 2023-08-10 10:19:27 发布

阅读量330

点赞数

分类专栏： vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_57111105/article/details/129430658

版权

vue.js 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

todolist小案例

如图所示

在这里插入图片描述

新建任务可以把任务添加到待办任务中，待办的任务可以选择完成或删除。

1，html部分

首先添加一个输入框和button，输入框通过 v-model绑定text属性，输入框的内容发生改变时vue中的text也随之发生改变，button绑定add()方法点击button时触发 add方法，把输入框的内容添加到vue中的lists。

在<ul>标签里，通过v-for 循环遍历lists中的内容。

v-for 循环产生的结构：
(item,index) 数组中内容和内容对应的索引值
in 循环的数组

每添加一条任务都可以点击完成或删除。

完成按钮绑定doneTask（item,index）方法，删除按钮绑定deleteTask(index) 方法，

点击完成任务将该任务从待办任务中移除，添加到已完成任务队列

点击删除任务将该任务从待办任务中删除

代码如下：

<div id="app">
    <!-- 添加一个文本框 -->
    <h2></input>新建任务：<input type="text" placeholder="请输入任务..." v-model="text">&nbsp;
    <!-- v-on简写 @绑定add()方法  点击button时触发 add方法 -->
    <button @click="add()">添加</button></h2>
    <h2>{{title}}</h2>
    <ul>
        <!-- v-for 循环产生的结构
        (item,index) 数组中内容和内容对应的索引值
        in 循环的数组-->
        <li v-for="(item,index) in lists">
            {{index+1+". "}}{{item}}&nbsp;&nbsp;<button @click="doneTask(item,index)">完成任务</button>&nbsp;<button @click="deleteTask(index)">删除任务</button><br><br>
        </li>
    </ul>
</div>

2，vue部分

2.1 数据模型部分

lists[]：存储输入框新建的任务；

doneLists[]：存储已完成任务部分；

text：绑定的是输入框的内容；

title：设置标题内容，可要可不要。

2.2 methods部分

add()：使用lists.push()将输入框的值添加到lists中，然后进行遍历
- push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
deleteTask(index)：删除该索引的内容
- splice(index,len,item)可以用来删除，更新，和增加数组内容
  参数:
  index:数组下标，len：为1或0，item:更新或增加的内容
  使用方法：
  1，删除，当参数形式为splice(index,1)时表示删除下标为index的内容
  2，更新，当参数形式为splice(index,1,item)时表示用新的值item更新替换掉下标为index的值
  3，增加，当参数形式为splice(index,0,item)时表示在下标为index的位置增加一项值为item
doneTask(item,index)：将该索引的内容添加到已完成任务，并删除待完成任务中的该内容

代码如下：

<!-- 初始化一个vue项目 -->
<script>
    let vm=Vue.createApp({
        data(){
            return{
                lists:[],
                doneLists:[],
                title:"待办任务:",
                text:""
            }
        },
        methods:{
            add(){
                this.lists.push(this.text)
                this.text = ''; // 将输入框的内容清空
            },
            deleteTask(index){
                this.lists.splice(index,1)  //删除该索引的内容
            },
            doneTask(item,index){
                this.doneLists.push(item),  //把该内容添加到已完成任务中
                this.deleteTask(index)  //删除该索引的待办任务
            }
        }
    });
    vm.mount("#app")
</script>

以下是完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todoList</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 添加一个文本框 -->
    <h2></input>新建任务：<input type="text" placeholder="请输入任务..." v-model="text">&nbsp;
    <!-- v-on简写 @绑定add()方法  点击button时触发 add方法 -->
    <button @click="add()">添加</button></h2>
    <h2>{{title}}</h2>
    <ul>
        <!-- v-for 循环产生的结构
        (item,index) 数组中内容和内容对应的索引值
        in 循环的数组-->
        <li v-for="(item,index) in lists">
            {{index+1+". "}}{{item}}&nbsp;&nbsp;<button @click="doneTask(item,index)">完成任务</button>&nbsp;<button @click="deleteTask(index)">删除任务</button><br><br>
        </li>
    </ul>


    <div>
        <h2>已完成任务:</h2>
        <ul>
            <!-- v-for 循环产生的结构
            (item,index) 数组中内容和内容对应的索引值
            in 循环的数组-->
            <li v-for="(item,index) in doneLists">
                {{index+1+". "}}{{item}}
            </li>
        </ul>
    </div>

</div>
<!-- 初始化一个vue项目 -->
<script>
    let vm=Vue.createApp({
        data(){
            return{
                lists:[],
                doneLists:[],
                title:"待办任务:",
                text:""
            }
        },
        methods:{
            add(){
                this.lists.push(this.text)
                this.text = ''; // 将输入框的内容清空
            },
            deleteTask(index){
                this.lists.splice(index,1)  //删除该索引的内容
            },
            doneTask(item,index){
                this.doneLists.push(item),  //把该内容添加到已完成任务中
                this.deleteTask(index)  //删除该索引的待办任务
            }
        }
    });
    vm.mount("#app")
</script>
</body>
</html>

jiacchen

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用vue完成todolist小案例

首先添加一个输入框和button，输入框通过 v-model绑定text属性，输入框的内容发生改变时vue中的text也随之发生改变，button绑定add()方法点击button时触发 add方法，把输入框的内容添加到vue中的lists。完成按钮绑定doneTask（item,index）方法，删除按钮绑定deleteTask(index) 方法，新建任务可以把任务添加到待办任务中，待办的任务可以选择完成或删除。每添加一条任务都可以点击完成或删除。2.2 methods部分。2.1 数据模型部分。
复制链接

扫一扫

专栏目录