VUE实践：Vue实现todoList（任务计划列表）

最新推荐文章于 2024-03-24 13:38:02 发布

BoomShaKa_S

最新推荐文章于 2024-03-24 13:38:02 发布

阅读量2.1k

点赞数

分类专栏： VUE实践文章标签： vue实现任务计划表 todolist vue实现todolist

本文链接：https://blog.csdn.net/weixin_41350225/article/details/89079505

版权

VUE实践专栏收录该内容

3 篇文章 0 订阅

订阅专栏

todoList（任务计划列表）

首先，如果你能实现任务计划表的话说明你能用该框架进行开发了，所以这也是一个简单的评判标准
之后呢，还没有明白的可以看一下我的代码，基本上每条我都注释了，如果有不明白的地方可以直接留言，我会及时回答的

先上效果图：
在这里插入图片描述
源码来了：

<!DOCTYPE html>
<html lang="en">

<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>vue实现todolist</title>
    <script src="./node_modules/_vue@2.6.10@vue/dist/vue.js"></script>
    <style>
        .deleteline {
            /* 删除线的样式 */
            text-decoration: line-through;
        }
        select{
            height: 25px;
            line-height: 25px;
            vertical-align: top;
        }
        input{
            height: 19px;
            line-height: 19px;
        }
        button{
            height: 26px;
            line-height: 26px;
            vertical-align: top;
        }
        .spanwith{
            display: inline-block;
            width: 150px;

        }
    </style>
</head>

<body>
    <h1>Vue实现todolist</h1>
    <div id="app">
        <!-- 这里下拉列表的改变的值是通过v-model绑定的 -->
        <select v-model='option'>
                <option value="">--请选择事件类型--</option>
                <option v-for='item in optionList'>{{ item }}</option>
        </select>
        <input type="text" v-model='inputValue'>
        <button @click='add'>增加事件</button>
        <ul v-if="option=='所有事件'">
                <li v-for='(list,index) of lists'>
                    <span v-if='list.status==false' class="spanwith">{{list.eventVal}}</span>
                    <span v-else class="deleteline spanwith">{{list.eventVal}}</span>
                    <!-- 这里的完成事件和删除事件我都传入了数组的id，而不是遍历的下标index -->
                    <button @click='del(list.id)'>删除</button>
                </li>
            </ul>
        <ul v-if="option=='未完成事件'">
            <li v-for='(list,index) of lists' v-if='list.status==false'>
                <span class="spanwith">{{list.eventVal}}</span>
                <!-- 这里的完成事件和删除事件我都传入了数组的id，而不是遍历的下标index -->
                <button @click='complete(list.id)'>完成</button>
                <button @click='del(list.id)'>删除</button>
            </li>
        </ul>
        <ul v-if="option=='完成事件'">
            <li v-for='(list,index) of lists' v-if='list.status==true'>
                <span class="deleteline spanwith">{{list.eventVal}}</span>
                <button @click='uncomplete(list.id)'>未完成</button>
                <button @click='del(list.id)'>删除</button>
            </li>
        </ul>
    </div>
    <script>
        var vueApp = new Vue({
            el: '#app',
            data: {
                inputValue: '',  //默认绑定的input的值为空
                lists: [
                    //测试数据
                    // {id:1, eventVal: '未完成事件1', status: false },
                    // {id:2, eventVal: '未完成事件2', status: false },
                    // {id:3, eventVal: '未完成事件3', status: false },
                    // {id:4, eventVal: '完成事件1', status: true },
                    // {id:5, eventVal: '完成事件2', status: true },
                    // {id:6, eventVal: '完成事件3', status: true },
                ],
                option:'', //保存下拉列表的名字
                optionList:['所有事件','未完成事件','完成事件'],
                listsId: 0  //lists中的id，在add方法中添加数组对象的时候递增添加进数组

            },
            methods: {
                //添加事件的方法
                add: function () {
                    this.listsId++; //数组id的值+1
                    if (this.inputValue != '') {    //判断输入的值是否为空
                        var str = { id: this.listsId, eventVal: this.inputValue, status: false } //要加进数组的对象
                        this.lists.push(str);    //点击按钮，将input中的值存储到数组list中
                        this.inputValue = '';   //添加后input内容为空，方便再次添加事件
                    } else {
                        alert('请输入正确的事件名')
                    }

                },
                //将事件改为完成事件
                complete: function (val) {
                    this.lists.forEach(element => {
                        if (element.id == val) element.status = true;     //将数组中对象的未完成状态改为已完成
                    });
                },
                //将事件改为未完成事件
                uncomplete: function (val) {
                    this.lists.forEach(element => {
                        if (element.id == val) element.status = false;     //将数组中对象的未完成状态改为未完成
                    });
                },
                //删除方法
                del: function (val) {
                    var subscript; //定义一个数组下标
                    //首先查找指定的元素在数组中的位置，即id,返回该数组对象的下标
                    this.lists.forEach(function (value, index) {
                        if (value.id == val) return subscript = index;
                    })
                    //删除数组中该下标对象
                    this.lists.splice(subscript, 1);
                }
            }
        })
    </script>
</body>

</html>

注：这里的样式我随便写了下，将就看下，之后关于select是通过v-model绑定的，我在下面给个简单的demo，你们参考下就明白了
之后，这里有个坑，就是我们在点击完成事件或者未完成事件后删除是要通过id查找下标删除，而不是传入index删除对应的下标

select是通过v-model绑定的demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <select name="" id="" v-model="select2" @change='getValue'>
            <option value="">--请选择--</option>
            <option v-for='item in optionList'>{{ item }}</option>
        </select>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                select2: '',
                optionList: ['青龙', '白虎', '朱雀', '玄武']
            },
            methods: {
                getValue: function(){
                    console.log('您选择了', this.select2)
                }
            }
        })
    </script>
</body>
</html>

BoomShaKa_S

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
VUE实践：Vue实现todoList（任务计划列表）

todoList（任务计划列表）首先，如果你能实现任务计划表的话说明你能用该框架进行开发了，所以这也是一个简单的评判标准之后呢，还没有明白的可以看一下我的代码，基本上每条我都注释了，如果有不明白的地方可以直接留言，我会及时回答的先上效果图：源码来了：<!DOCTYPE html><html lang="en"><head> <me...
复制链接

扫一扫