用vue和bootstrap实现TODO列表

最新推荐文章于 2025-05-29 10:17:42 发布

Zԅ(¯ㅂ¯ԅ)

最新推荐文章于 2025-05-29 10:17:42 发布

阅读量268

点赞数

文章标签： bootstrap 前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/2201_75321887/article/details/130105410

版权

该示例展示了如何使用Vue.js创建一个简单的任务管理应用，包括添加待办任务，标记任务为已完成，以及搜索已完成的任务。当尝试添加任务但输入框为空时，会弹出警告提示用户输入任务名称。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在输入框输入要添加的任务，点击添加按钮，任务进入待完成列表，完成后点击完成按钮，任务进入已完成任务列表，任务较多时，在搜索框输入要查找的任务，列表显示搜索出来的任务。

当输入框为空时，点击添加按钮，弹出警示框，要求用户输入任务名称。

代码步骤：

1.头部分别引入vue和bootstrap文件

<script type="text/javascript" src="vue.js"></script>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

2.书写HTML样式，样式引用bootstrap

<div class="container" id="app">

            <div class="form-group">
                <label for="name">TODO列表</label>
                <input type="text" class="form-control" placeholder="" id="name" v-model="name">
            </div>
            <button class="btn btn-primary" @click="add">添加</button>
            <table class="table table-bordered">
                <label>待完成列表</label>

                <tr>
                    <th>编号</th>
                    <th>内容</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(a,index) in users">
                    <td>{{index+1}}</td>
                    <td>{{a.name}}</td>
                    <td>
                        <button class="btn btn-primary" @click="update(index)">完成</button>
                    </td>
                </tr>
            </table>
            <div class="form-group">
                <label for="n">搜索</label>
                <input type="text" class="form-control" placeholder="" id="n" v-model="find">
            </div>
            <table class="table table-bordered">
                <label>已完成列表</label>
                <tr>
                    <th>编号</th>
                    <th>内容</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(b,index) in finishs" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{b.name}}</td>
                    <td>已完成</td>
                </tr>
            </table>
        </div>

3.实例化vue对象

var vm = new Vue( {
            el: "#app",
            data: {
                name: "",
                users: [],
                find: '',
                finish: []
            })}

4.添加按钮功能实现（写在方法中）

如果输入框为空，则弹出警示框示意用户输入任务名称，如果输入框有值，则将值传给任务列表

add ()
                {
                    if ( this.name !== '' )
                    {
                        this.users.push( {
                            name: this.name,
                        } )
                    } else
                    {
                        alert( '请输入任务名称' )
                    }

                }

5.完成按钮功能实现（写在方法中）

点击完成，任务从未完成列表中删除，出现在已完成列表中

update ( index )
                {
                    this.finish.push( this.users[ index ] )
                    this.users.splice( index, 1 )
                }

6.搜索框功能（计算属性实现）

使用filter（）方法过滤数组中元素，indexOf（）方法返回指定字符串

computed: {
                finishs ()
                {
                    return this.finish.filter( ( item ) =>
                    {
                        return item.name.indexOf( this.find ) !== -1
                    } )
                }
            }

完整代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="vue.js"></script>
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    </head>

    <body>
        <div class="container" id="app">

            <div class="form-group">
                <label for="name">TODO列表</label>
                <input type="text" class="form-control" placeholder="" id="name" v-model="name">
            </div>
            <button class="btn btn-primary" @click="add">添加</button>
            <table class="table table-bordered">
                <label>待完成列表</label>

                <tr>
                    <th>编号</th>
                    <th>内容</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(a,index) in users">
                    <td>{{index+1}}</td>
                    <td>{{a.name}}</td>
                    <td>
                        <button class="btn btn-primary" @click="update(index)">完成</button>
                    </td>
                </tr>
            </table>
            <div class="form-group">
                <label for="n">搜索</label>
                <input type="text" class="form-control" placeholder="" id="n" v-model="find">
            </div>
            <table class="table table-bordered">
                <label>已完成列表</label>
                <tr>
                    <th>编号</th>
                    <th>内容</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(b,index) in finishs" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{b.name}}</td>
                    <td>已完成</td>
                </tr>
            </table>
        </div>

    </body>
    <script>
        var vm = new Vue( {
            el: "#app",
            data: {
                name: "",
                users: [],
                find: '',
                finish: []
            },
            methods: {
                add ()
                {
                    if ( this.name !== '' )
                    {
                        this.users.push( {
                            name: this.name,
                        } )
                    } else
                    {
                        alert( '请输入任务名称' )
                    }

                },
                update ( index )
                {
                    this.finish.push( this.users[ index ] )
                    this.users.splice( index, 1 )
                }
            },
            computed: {
                finishs ()
                {
                    return this.finish.filter( ( item ) =>
                    {
                        return item.name.indexOf( this.find ) !== -1
                    } )
                }
            }
        } )
    </script>

</html>