使用vue去制作一个todolist待办事项列表
里面的vue.js和bootstrap.js都是我从网上直接引过来的包
<!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" />
<!-- 导入vue包,在浏览器内存中，就多了一个vue构造函数 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<title></title>
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"> 添加任务 </h3>
</div>
<div class="panel-body form-inline">
<!--<label>
ID:
<input type="text" value="" class="form-control" v-model="id"/>
</label>-->
<label>
Name:
<input type="text" value="" class="form-control" v-model="name" @keyup.enter="add"/>
</label>
<label>
Content:
<input type="text" value="" class="form-control" v-model="content" @keyup.enter="add"/>
</label>
<label>
<!--添加数据按钮-->
<input type="button" value="添加" class="btn btn-primary" @click="add"/>
</label>
<label>
搜索名称关键字:
<input type="text" value="" class="form-control" v-model="keywords"/>
</label>
</div>
</div>
<!--table的class去使用bootstrap设置样式-->
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Content</th>
<th>Createtime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key='item.id'>
<td > {{ item.id }} </td>
<td > {{ item.name }} </td>
<td > {{ item.content }} </td>
<!--dateFormat过滤日期-->
<td > {{ item.ctime | dateFormat}} </td>
<td > <a href="#" @click.prevent="del(item.id)">删除</a> </td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
id:'',
name:'',
content:'',
//搜索时的关键词keywords
keywords:'',
list:[
{id: 1,name: '任务1' ,content:'JavaScript',ctime: new Date() },
{id: 2,name: '任务2' ,content:'HTML',ctime: new Date() },
]
},
methods:{
add(){ //添加数据
if(this.name == "" || this.content == ""){
alert("任务名或内容为空")
}else{
var car = {id: this.list.length+1,name: this.name,content:this.content,ctime: new Date()}
this.list.push(car)
//添加完数据后清空添加行
this.id = ''
this.name = ''
this.content = ''
}
},
del(id){ //根据id删除数据
this.list.some( (item,i) =>{
if(item.id == id){
this.list.splice(i,1)
//如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
return true
}
})
// console.log(this.list.length)
//如果删除某条数据，数组的id重新排列
this.list.forEach(function(item,index){
// console.log(item);
item.id = index + 1;
})
},
search(keywords){ //根据关键字进行数据搜索
var newList = []
//搜索方法
this.list.filter(item=>{
//keywords为空时，显示全部列表
if(item.name.includes(keywords) == true){
newList.push(item)
}
})
return newList
}
},
filters: { //定义一个私有过滤器 有两个条件：过滤器名称和处理函数
dateFormat:function(dateStr,pattern = ''){
var dt = new Date(dateStr)
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
var h = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${h}:${mm}:${ss}`
}
}
})
</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
效果：
在前面输入任务名和任务内容，点击添加会在列表后面新增任务
搜索关键字会根据Name属性去进行搜索，无关键字时默认会显示全部任务
点击删除会重新将任务id进行排列
一起学习，一起进步 -.- ，如有错误，可以发评论
