一、需求與準備
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=”函數”）
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
