vue版本2.3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<!--bootstrap库-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<!--vue-->
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
todoval:"",
nowIndex:0,
myData:[]
},
methods:{
add:function(){ //添加
if(this.todoval != ''){ //判断todoval是否为空
this.myData.push({
todotext:this.todoval
})
this.todoval = '';
}
},
deleteList:function(){ //删除
if(this.nowIndex == -2){ // 判断nowIndex是否为-2(这个值是自定义的),是-2全部删除,不是-2运行else删除单个
this.myData = [];
}else{
this.myData.splice(this.nowIndex,1);
}
},
abolish:function(){ //取消
this.todoval = ''; //如果取消事件则清空todoval
}
}
})
}
</script>
</head>
<body>
<div id="box" class="container">
<h3 class="text-center">My TodoList</h3>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary btn-sm btn-block" data-toggle="modal" data-target="#mymodal">add</button>
</div>
</div>
<table class="table table-bordered table-hover">
<caption class="text-center">TodoList</caption>
<tr>
<th class="text-center">order</th>
<th>info</th>
<th class="text-center">delete</th>
</tr>
<tr v-for="(item,index) in myData">
<td class="text-center">{{index+1}}</td>
<td>{{item.todotext}}</td>
<td>
<button class="btn btn-danger btn-sm center-block" data-toggle="modal" data-target="#delete-modal" @click="nowIndex = index">
<span>×</span>
</button>
</td>
</tr>
<tr>
<td colspan="3" class="text-muted text-center" v-show="!myData.length">no-todolist(please enter your notes)</td>
</tr>
<tr v-show="myData.length">
<td colspan="3"><button class="btn btn-danger btn-sm btn-block" data-toggle="modal" data-target="#delete-modal" @click="nowIndex = -2">all-delete</button></td>
</tr>
</table>
<!--添加的摸态框-->
<div class="modal fade" role="dialog" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">
<span>×</span>
</button>
<h5 class="modal-title">please enter your notes</h5>
</div>
<div class="modal-body">
<div class="form-group">
<textarea class="form-control" v-model="todoval"></textarea>
</div>
<p v-show="!todoval.length">Please enter content</p>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-danger" data-dismiss="modal" @click="abolish()">abolish</button>
<button class="btn btn-sm btn-primary" data-dismiss="modal" @click="add()">add</button>
</div>
</div>
</div>
</div>
<!--删除的摸态框-->
<div class="modal fade" role="dialog" id="delete-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">
<span>×</span>
</button>
<h5 class="modal-title">Are you sure about the deletion?</h5>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-danger" data-dismiss="modal">no</button>
<button class="btn btn-sm btn-primary" data-dismiss="modal" @click="deleteList()">yes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
