Vue入门02-vue实现ToDoList

最新推荐文章于 2022-11-03 20:34:19 发布

Sophie_U

最新推荐文章于 2022-11-03 20:34:19 发布

阅读量591

点赞数

文章标签：实例 bootstrap vue

本文链接：https://blog.csdn.net/Sophie_U/article/details/54896696

版权

一、需求与准备

1、准备
使用bootstrap实现页面的基础样式（依赖jquery），使用vue实现功能需要
2、功能需求：

1）、表单实现输入任务清单后加入到展示项中
2）、点击删除按钮弹出警告框询问是否删除（bootstarp模态框插件）
3)、确定删除时，删除对应项（单项删除，全部删除）
4）、任务列表为空时，显示“数据为空” v-show

二、实例

1、静态页面

demo使用bootstrap来快速搭建页面
1）、表单组件：
.form, form-group, form-control
2)、模态框：
样式类：.modal,modal-content,modal-header,modal-body,modal-footer
触发模态框：data-toggle=”modal”,data-target=”模态框ID”
取消模态框：data-dismiss=”true”
2、功能实现
1）、表单数据：
v-model（数据绑定）,v-on:click=”fun()”（绑定事件）,v-for=”value in dataArr”(遍历),
2）、添加任务
思路：通过v-model绑定数据到vue实例中（timeStamp,taskItem用于暂存数据），点击提交时，在事件响应函数内向任务列表数组内添加提交的数据后，再清空用于存放数据的timeStamp,taskItem。
3）、删除任务
在vue实例中的methods属性上添加事件响应函数，在data中定义targetIndex以存放点击的按钮索引，遍历时，绑定点击事件v-on:click=”targetIndex=$index”,点击时根据targetIndex的值，删除对应索引的数据。
4）、删除全部
绑定删除全部按钮事件，targetIndex=-2，在删除响应除数内通过判断确定是部分删除还是全部删除。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <script src="../vendor/jquery-1.7.2.js"></script>
    <script src="../vendor/bootstrap.js"></script>
    <link href="../vendor/bootstrap.min.css"  type="text/css" rel="stylesheet"/>
    <script src="../vendor/vue/dist/vue.js"></script>
</head>
<body>
    <div class="container" id="box">
        <form >
            <div class="form-group">
                <label for="timeStamp">时间</label>
                <input type="datetime" id="timeStamp" v-model="timeR" name="timeStamp" class="form-control">
            </div>
            <div class="form-group">
                <label for="todoItem" class="">任务</label>
                <input type="text" id="todoItem" name="todoItem" v-model="taskItem" class="form-control">
            </div>
            <div class="form-group">
                <button class="btn btn-success" v-on:click="add()" type="button">添加</button>
                <button class="btn btn-danger" type="submit">重置</button>
            </div>
        </form>
        <table class="table table-bordered text-center">
            <caption><h3>任务清单</h3></caption>
            <tr >
                <th class="text-center">序号</th>
                <th class="text-center">时间</th>
                <th class="text-center">任务</th>
                <th class="text-center">操作</th>
            </tr>
            <tr v-for="value in taskList">
                <td>{{$index+1}}</td>
                <td>{{value.timeStamp}}</td>
                <td>{{value.task}}</td>
                <td><button class="btn btn-danger" data-toggle="modal" data-target="#alertBox" v-on:click="targetIndex=$index">删除</button></td>
            </tr>
            <tr v-show="taskList.length!=0">
                <td colspan="4" class="text-right"><button class="btn btn-danger"  data-toggle="modal" data-target="#alertBox" v-on:click="targetIndex=-2">删除全部</button></td>
            </tr>
            <tr v-show="taskList.length==0">
                <td colspan="4" class="text-muted" >暂无数据......</td>
            </tr>
        </table>
        <div role="dialog" class="modal" id="alertBox">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">提醒：</div>
                    <div class="modal-body text-center" v-show="targetIndex>0">
                        确定要删除么？？？
                    </div>
                    <div class="modal-body text-center" v-show="targetIndex==-2">
                        确定要全部删除么？？
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-danger" data-dismiss="modal" v-on:click="deleteFn(targetIndex)">确认</button>
                        <button class="btn btn-primary" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script>
        var vm=new Vue({
            el:"#box",
            data:{
                timeR:'',
                taskItem:'',
                targetIndex:-1,
                taskList:[
                    {
                        timeStamp:'2016-12-03',
                        task:'学习学习'
                    },
                    {
                        timeStamp:'2016-12-03',
                        task:'代码代码代码'
                    }
                ]
            },
            methods:{
                add:function(){
                    console.log(this.timeR)
                    this.taskList.push({
                        timeStamp:this.timeR,
                        task:this.taskItem
                    });
                    this.timeR="";
                    this.taskItem="";
                },
                deleteFn:function(index){
                    if(index>0){
                        this.taskList.splice(index,1)
                    }else{
                        this.taskList=[]
                    }
                }
            }
        })
    </script>
</body>
</html>

补充：

1）、v-on:click的简写形式：@click
2)、在vue中传入事件对象时：$event
3)、事件冒泡（原生：ev.cancelBubble=true,vue中@click.stop=”函数”）
4)、阻止浏览器默认行为：（原生：ev.preventDefault(),vue中@click.prevent=”函数”）

Sophie_U

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue入门02-vue实现ToDoList

一、需求与准备1、准备使用bootstrap实现页面的基础样式（依赖jquery），使用vue实现功能需要 2、功能需求： 1）、表单实现输入任务清单后加入到展示项中 2）、点击删除按钮弹出警告框询问是否删除（bootstarp模态框插件） 3)、确定删除时，删除对应项（单项删除，全部删除） 4）、任务列表为空时，显示“数据为空” v-show二、实例1、静态页
复制链接

扫一扫