vue_17综合小案例(按键修饰符,过滤器,全局指令)
程序员文章站
2022-07-04 19:30:35
...
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../util/vue-2.4.0.js"></script>
<link rel="stylesheet" href="../util/bootstrap-3.3.7.css"/>
</head>
<body>
<div id="test">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label for="">
ID:
<input type="text" class="form-control" v-model="id" @keyup.enter="add"/>
</label>
<label for="">
Name:
<input type="text" class="form-control" v-model="name" @keyup.enter="add"/>
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add"/>
<label for="">
搜索名称关键字
<input type="text" class="form-control" v-model="keywords" v-focus/>
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{ item.id }}</td>
<td v-text="item.name"></td>
<td > {{ item.ctime | my_filter }}</td>
<td>
<a href="#" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
Vue.directive("focus",{
bind: function (el) {
},
inserted: function (el) {
el.focus()
},
updated: function (el) {
}
});
var vm1 = new Vue({
el:"#test",
data:{
id:"",
name:"",
keywords:"",
list:[
{id:1,name:"奔驰",ctime:new Date()},
{id:2,name:"宝马",ctime:new Date()},
{id:3,name:"特斯拉",ctime:new Date()}
]
},
methods:{
add: function () {
var car = {id:this.id,name:this.name,ctime:new Date()};
this.list.push(car);
this.name = this.id = ""; // 重置输入框
},
del: function (id) {
//some 方法是将列表里面的每一项都执行一遍函数
// item 是列表里面的每一项值,i是item对应的索引
/*
* array.splice(index,howmany,item1,.....,itemX)
* index必需。规定从何处添加/删除元素。
* howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。
* 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素
* item1, ..., itemX,删除之后要添加的元素
* */
//方法一:使用 some 方法,匹配到结果的时候当场删除
// this.list.some(function (item,i) {
// if(item.id == id){
// vm1.list.splice(i,1);
// return true
// }
// });
//方法二:先获取索引,然后删除指定索引
var index = this.list.findIndex(function (item) {
if(item.id==id) return true;
});
this.list.splice(index,1);
// 不过注意 some方法可以做很多事情,findIndex只是查找索引,并返回
},
search: function (keywrods) {
//方法一:判断列表中哪些内容是符合要求的,把符合要求的添加到一个新列表中,最后返回新列表
//这种还要新建新列表效率太低
// var new_list = [];
// this.list.forEach(function (item) {
// if (item.name.indexOf(keywrods)!=-1) new_list.push(item);
// // 空字符串的indexof索引为0,所以为空字符串的时候,返回是所有数据,不包含内容会返回-1
// });
// return new_list
//方法二 使用filter 方法, filter方法也会遍历每一项,返回满足的条件的结果
return this.list.filter(function (item) {
// es6 新方法,使用includes判断是否包含元素,包含返回true
if(item.name.includes(keywrods)) return item
})
}
},
filters:{
my_filter: function (data,pattern="") {
var year = data.getFullYear();
// padStart 方法是在字符串不满足位数的时候以指定字符填充
// padStart(位数,指定字符) 以指定字符填充到指定的位数
var month = (data.getMonth()+1).toString().padStart(2,"0"); // 月份需要加1 才是当前月份
var day = data.getDate().toString().padStart(2,"0");
var hours = data.getHours().toString().padStart(2,"0");
var minutes = data.getMinutes().toString().padStart(2,"0");
var seconds = data.getSeconds().toString().padStart(2,"0");
if (pattern.toLowerCase() == "year-month-day hours:minutes:seconds") {
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
// ${} `` 注意不是双引号,而是esc下面的按键, ${} 是在`` 能够填充变量,类似于shell
} else{
return `${year}-${month}-${day}`
}
}
}
})
</script>
</body>
</html>