vue實(shí)現(xiàn)ToDoList簡單實(shí)例

更新時(shí)間：2017年02月07日 08:38:06 作者：Sophie_U

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)ToDoList簡單實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、需求與準(zhǔn)備

1、準(zhǔn)備

使用bootstrap實(shí)現(xiàn)頁面的基礎(chǔ)樣式（依賴jquery），使用vue實(shí)現(xiàn)功能需要

2、功能需求

1）、表單實(shí)現(xiàn)輸入任務(wù)清單后加入到展示項(xiàng)中
2）、點(diǎn)擊刪除按鈕彈出警告框詢問是否刪除（bootstarp模態(tài)框插件）
3)、確定刪除時(shí)，刪除對應(yīng)項(xiàng)（單項(xiàng)刪除，全部刪除）
4）、任務(wù)列表為空時(shí)，顯示“數(shù)據(jù)為空” v-show

二、實(shí)例

1、靜態(tài)頁面

demo使用bootstrap來快速搭建頁面

1）、表單組件：
.form, form-group, form-control
2)、模態(tài)框：
樣式類：.modal,modal-content,modal-header,modal-body,modal-footer
觸發(fā)模態(tài)框：data-toggle=”modal”,data-target=”模態(tài)框ID”
取消模態(tài)框：data-dismiss=”true”
2、功能實(shí)現(xiàn)
1）、表單數(shù)據(jù)：
v-model（數(shù)據(jù)綁定）,v-on:click=”fun()”（綁定事件）,v-for=”value in dataArr”(遍歷),
2）、添加任務(wù)
思路：通過v-model綁定數(shù)據(jù)到vue實(shí)例中（timeStamp,taskItem用于暫存數(shù)據(jù)），點(diǎn)擊提交時(shí)，在事件響應(yīng)函數(shù)內(nèi)向任務(wù)列表數(shù)組內(nèi)添加提交的數(shù)據(jù)后，再清空用于存放數(shù)據(jù)的timeStamp,taskItem。
3）、刪除任務(wù)
在vue實(shí)例中的methods屬性上添加事件響應(yīng)函數(shù)，在data中定義targetIndex以存放點(diǎn)擊的按鈕索引，遍歷時(shí)，綁定點(diǎn)擊事件v-on:click=”targetIndex=$index”,點(diǎn)擊時(shí)根據(jù)targetIndex的值，刪除對應(yīng)索引的數(shù)據(jù)。
4）、刪除全部
綁定刪除全部按鈕事件，targetIndex=-2，在刪除響應(yīng)除數(shù)內(nèi)通過判斷確定是部分刪除還是全部刪除。

<!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">時(shí)間</label>
    <input type="datetime" id="timeStamp" v-model="timeR" name="timeStamp" class="form-control">
   </div>
   <div class="form-group">
    <label for="todoItem" class="">任務(wù)</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>任務(wù)清單</h3></caption>
   <tr >
    <th class="text-center">序號(hào)</th>
    <th class="text-center">時(shí)間</th>
    <th class="text-center">任務(wù)</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" >暫無數(shù)據(jù)......</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">
      確定要?jiǎng)h除么？？？
     </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)">確認(rèn)</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:'學(xué)習(xí)學(xué)習(xí)'
     },
     {
      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>

補(bǔ)充：

1）、v-on:click的簡寫形式：@click
2)、在vue中傳入事件對象時(shí)：$event
3)、事件冒泡（原生：ev.cancelBubble=true,vue中@click.stop=”函數(shù)”）
4)、阻止瀏覽器默認(rèn)行為：（原生：ev.preventDefault(),vue中@click.prevent=”函數(shù)”）

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: