1、效果圖
2、局部過濾器案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body from-inline">
<label>
Id:
<input type="text" class="form-control" v-model="id">
</label>
<label>
Name:
<input type="text" class="form-control" v-model="name">
</label>
<input type="button" class="btn btn-primary" value="添加" @click="add">
<label>
搜索名稱關鍵字：
<input type="text" class="form-control" v-model="keyword">
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keyword)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.cdate | timeDateFormat }}</td>
<td>
<a href="" @click.prevent="del(item.id)">
刪除
</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
id : '',
name : '',
keyword : '',
list: [
{ id : 1 , name : '奔馳' , cdate : new Date() },
{ id : 2 , name : '寶馬' , cdate : new Date() },
{ id : 3 , name : '瑪莎拉蒂' , cdate : new Date() },
{ id : 4 , name : '大奔' , cdate : new Date() },
{ id : 5 , name : '蘭德酷路澤' , cdate : new Date() },
]
},
methods:{
add () {
var con = {id : this.id, name : this.name, cdate : new Date()};
this.list.push(con);
this.id = this.name = '';
},
del (id) {
var index = this.list.findIndex( item => {
if(item.id == id){
return true;
}
})
this.list.splice(index,1)
},
search (keyword) {
var arr = [];
this.list.forEach(item => {
if(item.name.indexOf(keyword) != -1){
arr.push(item);
}
})
return arr;
}
},
filters : {
timeDateFormat : function (msg) {
//講字符串轉爲Date格式
var mt = new Date(msg);
//獲取年份
var year = mt.getFullYear();
//從0開始，獲取月份
var month = (mt.getMonth() + 1).toString().padStart(2,'0');
//獲取天數
var day = mt.getDay().toString().padStart(2,'0');
/* if (con === 'yyyy/mm/dd'){
return year + "/" + month + "/" + day;
}*/
//獲取小時
var hh = mt.getHours().toString().padStart(2,'0');
//獲取分鐘
var mm = mt.getMinutes().toString().padStart(2,'0');
//獲取秒
var ss = mt.getSeconds().toString().padStart(2,'0');
return year + "/" + month + "/" + day + "/ " + hh + ":" + mm + ":" + ss;
}
}
});
</script>
</body>
</html>
padStart方法
| 方法 | 說明 |
|---|---|
| String.prototype.padStart(maxLength, fillString=’’) | 字符串長度爲maxLength，不夠的在開頭用fillString填充， 例如 :“123”.padStart(6,“a”)=“aaa123” |
| String.prototype.padEnd(maxLength, fillString=’’) | 這個和上面類似，是在結尾處填充， 例如"123".padEnd(6,“a”)=“123aaa” |