过滤器
2019-07-02 本文已影响0人
北街九条狗
品牌实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<div id="app">
<!-- 1 -->
<div class="panel panel-primary">
<!-- header -->
<div class="panel-heading">
<h5>品牌列表信息管理</h5>
</div>
<!-- content -->
<div class="panel-body form-inline">
<input type="text" class="form-control" style="width: 300px;" placeholder="品牌ID" v-model="id">
<input type="text" class="form-control" style="width: 300px;" placeholder="品牌名称" v-model="name" @keyup.enter="add">
<input type="button" value="添加" class="btn btn-primary" @click="add">
<input type="text" class="form-control" style="width: 400px;" placeholder="关键字搜索" v-model="keywords">
</div>
</div>
<!-- 2 -->
<table class="table table-striped">
<thead>
<tr>
<th>品牌ID</th>
<th>品牌名称</th>
<th>添加时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in keywordsFilter(keywords)" :key="item.bid">
<td>{{item.bid}}</td>
<td>{{item.bname}}</td>
<td>{{item.time | dateFormat}}</td>
<td><a href="" @click.prevent="del(item.bid)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.filter('dateFormat', function (data, arg0) {
var y = data.getFullYear().toString().padStart(2, "0");
var m = (data.getMonth() + 1).toString().padStart(2, "0");
var d = data.getDate().toString().padStart(2, "0");
var hh = data.getHours().toString().padStart(2, "0");
var mm = data.getMinutes().toString().padStart(2, "0");
var ss = data.getSeconds().toString().padStart(2, "0");
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
})
var vm = new Vue({
el: "#app",
data: {
id: '',
name: '',
brandList: [ // brandList.splice(起始索引,1)
{bid: 1001,bname: '奔驰',time: new Date()},
{bid: 1002,bname: '马自达',time: new Date()},
{bid: 1003,bname: '宝马',time: new Date()},
{bid: 1004,bname: '悍马',time: new Date()},
{bid: 1005,bname: '奔奔',time: new Date()},
{bid: 1006, bname: '保时捷',time: new Date()},
{ bid: 1007,bname: '捷达',time: new Date()}, ],
keywords: ''
},
methods: {
add() {
var brand = {
bid: this.id,
bname: this.name,
time: new Date()
};
this.brandList.push(brand);
this.id = this.name = '';
},
keywordsFilter(word) {
// 1.for循环
// var newlist = [];
// // word是查询关键字
// for(index in this.brandList){
// if(this.brandList[index].bname.indexOf(word) != -1){
// newlist.push(this.brandList[index]);
// }
// }
// return newlist;
// 2. forEach
// function(element){return 1} element => 1
// var newlist = [];
// this.brandList.forEach(item => {
// if(item.bname.indexOf(word) != -1){
// newlist.push(item);
// }
// });
// return newlist;
// 3.some
// var newlist = [];
// this.brandList.some(item => {
// if(item.bname.indexOf(word) != -1){
// newlist.push(item);
// // return true; // break
// }
// });
// return newlist;
// 4.filter过滤器方式
var newList = this.brandList.filter(item => {
if (item.bname.includes(word)) {
return item;
}
})
return newList;
},
del(num) {
console.log(num);
// this.brandList.splice(num,1);
// forEach some
// this.brandList.forEach((item,index) => {
// if(item.bid == num){
// this.brandList.splice(index,1);
// }
// });
// this.brandList.some((item,index) => {
// if(item.bid == num){
// this.brandList.splice(index,1);
// return true;
// }
// });
// findIndex函数，返回值就是索引
var index = this.brandList.findIndex(item => {
if (item.bid == num) {
return true;
}
});
this.brandList.splice(index, 1);
},
add2(){
console.log(1);
}
},
})
</script>
</body>
</html>
全局过滤器
Vue中允许自定义过滤器，可被用作一些常见的文本格式化；
过滤器可用在两个地方：mustache插值{{}}和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，由“管道”符表示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{ msg | msgChange('java2')}}</p>
<p>{{ date | dateFormat}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
// 定义全局过滤器
// dateFormat -- 过滤器名称
// function(data,arg0){} data -- data是要处理的数据 arg0 -- 是传过来的参数
Vue.filter('msgChange',function(data,arg0){
data = '你好';
return data+arg0;
})
// function dateGetTwo(date){
// return date < 10 ? '0' + date : date;
// }
// 处理日期
Vue.filter('dateFormat',function(data,arg0){
var y = data.getFullYear().toString().padStart(2,"0");
var m = (data.getMonth()+1).toString().padStart(2,"0");
var d = data.getDate().toString().padStart(2,"0");
var hh = data.getHours().toString().padStart(2,"0");
var mm = data.getMinutes().toString().padStart(2,"0");
var ss = data.getSeconds().toString().padStart(2,"0");
// return year+"-"+(month+1)+"-"+day;
// return `${dateGetTwo(year)}-${dateGetTwo((month+1))}-${dateGetTwo(day)}`;
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
})
var vm = new Vue({
el : "#app",
data : {
msg : 'java2班 Vue课程',
date : new Date(),
},
})
</script>
</body>
</html>
私有过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{msg1 | dateFormat}}</p>
</div>
<div id="app1">
<p>{{msg2 | dateFormat2}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
// 处理日期
Vue.filter('dateFormat', function (data, arg0) {
var y = data.getFullYear().toString().padStart(2, "0");
var m = (data.getMonth() + 1).toString().padStart(2, "0");
var d = data.getDate().toString().padStart(2, "0");
var hh = data.getHours().toString().padStart(2, "0");
var mm = data.getMinutes().toString().padStart(2, "0");
var ss = data.getSeconds().toString().padStart(2, "0");
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
})
var vm = new Vue({
el: "#app",
data: {
msg1: new Date(),
},
})
var vm2 = new Vue({
el: "#app1",
data: {
msg2: new Date(),
},
methods: {},
// 私有过滤器，只对某个vue实例起作用
filters: {
dateFormat2 : function (data) {
var y = data.getFullYear().toString().padStart(2, "0");
var m = (data.getMonth() + 1).toString().padStart(2, "0");
var d = data.getDate().toString().padStart(2, "0");
return `${y}-${m}-${d}`;
}
}
})
</script>
</body>
</html>
