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

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

創(chuàng)新互聯(lián)建站是專業(yè)的下陸網(wǎng)站建設(shè)公司，下陸接單;提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行下陸網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

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><h4>任務(wù)清單</h4></caption>
   <tr >
    <th class="text-center">序號</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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享文章：vue實(shí)現(xiàn)ToDoList簡單實(shí)例
本文網(wǎng)址：http://bm7419.com/article32/psdesc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、定制網(wǎng)站、商城網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、用戶體驗(yàn)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容