溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、需求與準備
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><h4>任務清單</h4></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=”函數”）
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
