index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>03_brandmgr</title>
</head>
<body>
<div id="app">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<!-- 这里不是通过绑定keyup事件完成查询，而是v-for循环的数据绑定到一个methods过滤方法完成 -->
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
<td>{
{item.ctime | dateFormat("yyyy-mm-dd hh:mm:ss")}}</td>
<td><a href="" @click.prevent="del(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
main.js
import Vue from 'vue'
//导入bootstrap样式
import BootStrap from "bootstrap/dist/css/bootstrap.min.css"
//全局过滤器，所有vue实例所控制的el区域都可以使用它
Vue.filter("dateFormat", function (data, pattern = "") {
var dt = new Date(data);
var y = dt.getFullYear();
//es6中string对象新增了一个方法:padStart()
//如果string不足指定位数，就在前面补0
var m = (dt.getMonth() + 1).toString().padStart(2, 0);
var d = dt.getDate().toString().padStart(2, 0);
var hh = dt.getHours().toString().padStart(2, 0);
var mm = dt.getMinutes().toString().padStart(2, 0);
var ss = dt.getSeconds().toString().padStart(2, 0);
//es6中模板字符串
if (pattern.toLowerCase().toString() == "yyyy-mm-dd") {
return `${
y}-${
m}-${
d}`;
} else {
return `${
y}-${
m}-${
d} ${
hh}:${
mm}:${
ss}`;
}
})
var vm = new Vue({
el: "#app",
data: {
id: "",
name: "",
keywords: "",
brandlist: [{
id: 1,
name: "奔驰",
ctime: new Date()
}, {
id: 2,
name: "宝马",
ctime: new Date()
}]
},
methods: {
del(id) {
//删除一条数据
//some循环和forEeah有区别，some循环内部可以return，终止循环
this.brandlist.some((element, index) => {
if (element.id == id) {
//这个元素就是要删除的元素
this.brandlist.splice(index, 1);
return true;
}
})
},
add() {
var one = {
id: this.id,
name: this.name,
ctime: new Date()
};
this.brandlist.push(one);
//清空输入框
this.id = this.name = "";
},
//过滤数据
search(keywords) {
//根据keywords，从brandlist过滤符合条件的数据，将这些数据返回
//该方法一定要return一个数组
if (keywords == "") {
return this.brandlist;
}
return this.brandlist.filter((element) => {
//如果keywords被当前element的name属性包含，则符合条件，return true
return element.name.indexOf(keywords) != -1
})
}
},
// filters: {
// //定义私有的vue过滤器
// //data就是要过滤的数据
// dateFormat: function (data, pattern = "") {
// var dt = new Date(data);
// var y = dt.getFullYear();
// //es6中string对象新增了一个方法:padStart()
// //如果string不足指定位数，就在前面补0
// var m = (dt.getMonth() + 1).toString().padStart(2,0);
// var d = dt.getDate().toString().padStart(2,0);
// var hh = dt.getHours().toString().padStart(2,0);
// var mm = dt.getMinutes().toString().padStart(2,0);
// var ss = dt.getSeconds().toString().padStart(2,0);
// //es6中模板字符串
// if (pattern.toLowerCase().toString() == "yyyy-mm-dd") {
// return `${y}-${m}-${d}`;
// }else{
// return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
// }
// }
// }
})
运行结果
