用vue和bootstrap实现TODO列表

最新推荐文章于 2024-02-20 15:58:37 发布

m0_71014221

最新推荐文章于 2024-02-20 15:58:37 发布

阅读量107

点赞数

文章标签： bootstrap 前端 html vue.js 前端框架

本文链接：https://blog.csdn.net/m0_71014221/article/details/130118412

版权

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

代码步骤：

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

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

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


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

            <div class="form-group">
                <label for="n">TODO列表</label>
                <input type="text" class="form-control" placeholder="" id="n" 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="ly">搜索</label>
                <input type="text" class="form-control" placeholder="" id="ly" 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 finish" >
                    <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: '',
                wancheng: []
            },

5.完成按钮功能实现（写在方法中）
点击完成，任务从未完成列表中删除，出现在已完成列表中
使用filter（）方法过滤数组中元素，indexOf（）方法返回指定字符串

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

完整代

<!DOCTYPE html>
<html>

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

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

            <div class="form-group">
                <label for="n">TODO列表</label>
                <input type="text" class="form-control" placeholder="" id="n" 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="ly">搜索</label>
                <input type="text" class="form-control" placeholder="" id="ly" 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 finish" >
                    <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: '',
                wancheng: []
            },
            methods: {
                add ()
                {
                    this.users.push( {
                        name: this.name,
                    } )
                },
                update ( index )
                {
                    this.wancheng.push( this.users[ index ] )
                    this.users.splice( index, 1 )
                }
            },
            computed: {
                finish ()
                {
                    return this.wancheng.filter( ( item ) =>
                    {
                        return item.name.indexOf( this.find ) !== -1
                    } )
                }
            }
        } )
    </script>

</html>

码