【IMWeb训练营作业】Todolist，没有用视频的例子

来源：互联网发布：照片制作软件免费下载编辑：程序博客网时间：2024/05/04 16:06
<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,index) 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:'2017-04-20',                    task:'泡沫'                },                {                    timeStamp:'2017-04-20',                    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>
0 0