Vue过滤器及小demo
程序员文章站
2022-06-19 13:09:32
过滤器：概念：Vue.js允许自定义过滤器，可被用作一些常见的文本格式化，过滤器可用在两个地方：mustache插值和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。过滤器调用时的格式：{{name | 过滤器的名称 }} 其中‘|’即为管道符过滤器的定义语法：Vue.filter(‘过滤器名称’, function(data) {})过滤器中的function，第一个参数data已经规定好了，为过滤器管道符前面传过来的数据name（变量名可自行更换....
- 过滤器：
概念：Vue.js允许自定义过滤器，可被用作一些常见的文本格式化，过滤器可用在两个地方：mustache插值和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。
过滤器调用时的格式：{{name | 过滤器的名称 }} 其中‘|’即为管道符
过滤器的定义语法：Vue.filter(‘过滤器名称’, function(data) {})
过滤器中的function，第一个参数data已经规定好了，为过滤器管道符前面传过来的数据name（变量名可自行更换），后面可传多个参数。插值表达式可同时调用多个过滤器，将Vue实例中的的data数据渲染到页面时，数据依次经过过滤器处理，最后将结果返回到页面上。
<div id="app">
<!--可同时调用多个过滤器，或给过滤器传多个参数-->
<p>{{mes | mesFormat('邪恶') | text}}</p>
</div>
<script>
//定义一个Vue全局的过滤器，名字叫做 mesFormat
Vue.filter('mesFormat', function(data, arg) {
return data.replace(/单纯/g, arg);
})
Vue.filter('text', function(data1){
return data1 + '=====';
})
var vm = new Vue({
el: '#app',
data: {
mes: '单纯的我，经常单纯地问，谁是这世上最单纯的人'
}
})
</script>
上例中的过滤器为全局过滤器，所有Vue实例都能访问到，在vue实例中还有一个filters属性，定义私有过滤器，只能该实例包含的区域范围内使用。过滤器调用时采用就近原则，如果私有过滤器和全局过滤器重名，则优先调用私有过滤器。
键值修饰符：
- .enter
- .tab
- .delet（捕获“删除”和“退格”键）
- .esc
- .space
- .up
- .down
- .left
- .right
上面都是Vue内置的键值修饰符，未出现的键值可通过键盘码来获取，比如F2对应的是 113，可通过@keyup.113="function"来使用键值修饰符，当你按下键盘的F2就会调用里面的function。也可自定义一个全局键值修饰符Vue.config.keyCodes.F2 = 113;这样直接使用@keyup.F2=“function”。
注： 因为F1–F2都是功能键，所以你按F1–F2并没有理想效果，可同时按住Ctrl + Fx（F1–F2），这样就能使键值修饰符产生效果
- 小demo包含的知识点：
- 将Vue实例中的数据渲染到页面
- 实现添加，删除，查找的功能
- 调用了全局过滤器和私有过滤器
- 对日期的格式化
- 键值修饰符
<!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>品牌列表</title>
<script src="../lib/vue.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
}
table {
width: 100%;
}
thead th,
tbody td {
border: 1px solid gainsboro;
text-align: center;
}
.panel {
margin-bottom: 2rem;
border: 2px solid rgb(110, 176, 233);
}
.panel-heading h3 {
margin-block-start: 0;
margin-block-end: 0;
background-color: rgb(110, 176, 233);
}
.panel-body {
margin: 1rem 0;
}
</style>
</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" class="form-control" v-model="id">
</label>
<label>
Name:
<input type="text" class="form-control" v-model="name" @keyup.F2="add">
<!--通过点击F2来添加，因为F2的键值修饰符不是Vue内置的，因此要在下面先定义-->
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
<!--在Vue中，使用事件绑定机制，为元素指定处理函数的时候，加不加小括号无所谓，加了小括号即可传参-->
<label>
搜索名称关键字:
<input type="text" class="form-control" v-model="keywords">
</label>
</div>
</div>
<!--品牌列表-->
<table cellspacing="0" 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>
<!--之前v-for的数据都是直接从data上的list中直接渲染过来的
现在，自定义一个search方法，同时把所有搜索关键字的数据，以传参形式传给search方法
在search方法内，通过for循环，把所有符合的数据保存到一个新数组并返回
注：空字符串是被包含于每个字符串内的，"小凡".indexOf('')返回的是0-->
<tr v-for="user in search(keywords)" :key="user.id">
<td>{{user.id}}</td>
<td v-text="user.name"></td>
<td>{{user.ctime | dataFormat}}</td>
<td>
<a href="" @click.prevent='del(user.id)'>删除</a>
<!--点击链接会默认刷新页面，所以通过事件修饰符.prevent来阻止-->
</td>
</tr>
</tbody>
</table>
</div>
<div id="app2">
<h3>{{ dt | dataFormat}}</h3>
</div>
<script>
//全局过滤器，进行时间的格式化
Vue.filter('dataFormat', function(dataStr) {
//根据给定的时间字符串，得到特定的时间
var dt = new Date(dataStr);
//yyyy-mm-dd
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0'); //getMonth()返回值从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中的字符串新方法String.prototype.padStart(maxLength,fillString='')
//或String.prototype.padEnd(maxLength,fillString='')来填充字符串
//上例中月，日，和时分秒不足两位的都用0来填充
return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
})
//自定义全局键值修饰符,定义后就可以直接在上面使用F2
Vue.config.keyCodes.F2 = 113;
var vm = new Vue({
el: '#app',
data: {
id: "",
name: "",
keywords: '',
list: [{
id: 1,
name: '小豆',
ctime: new Date()
}, {
id: 2,
name: '小包',
ctime: new Date()
}]
},
methods: {
//添加方法
add() {
//分析：
// 1、 获取到id和name， 直接从data上获取
// 2、 组织处一个对象
// 3、 把这个对象， 调用数组的相关方法， 添加到当前data上的list中
// 4、 注意： 在Vue中， 已经实现了数据的双向绑定， 每当我们修改了data中的数据，
// Vue会默认监听到数据的改动， 自动把最新的数据， 应用到页面上
this.list.push({
id: this.id,
name: this.name,
ctime: new Date()
});
this.id = this.name = '';
},
//删除方法
del(id) {
// 1、 如何根据id， 找到要删除项的索引
// 2、 找到索引， 直接用数组的splice方法
//some()返回值为true或false
// this.list.some((item, i) => {
// if (item.id == id) {
// this.list.splice(i, 1);
// return true;
// }
// })
var i = this.list.findIndex((item) => {
if (item.id == id) return true
});
this.list.splice(i, 1);
//console.log(i);//i为其索引值
},
//根据关键字进行数据检索
search(keywords) {
// var newlist = [];
// this.list.forEach(item => {
// if (item.name.indexOf(keywords) != -1) {
// newlist.push(item);
// }
// });
// return newlist;
//filter()返回通过测试的新数组
return this.list.filter((item) => {
//if (item.name.indexOf(keywords) != -1)
//注意：ES6中,为字符串提供了一个新方法，叫做 string.prototype.includes('要包含的字符串')
//如果包含则返回true，否则返回false
if (item.name.includes(keywords)) return true;
});
}
}
})
var vm2 = new Vue({
el: '#app2',
data: {
dt: new Date()
},
methods: {},
filters: { //自定义私有过滤器,过滤器有两个条件：过滤器名称 和 处理函数
dataFormat: function(dataStr) {
//根据给定的时间字符串，得到特定的时间
var dt = new Date(dataStr);
//yyyy-mm-dd
var y = dt.getFullYear();
var m = dt.getMonth() + 1; //getMonth()返回值从0开始
var d = dt.getDate();
var hh = dt.getHours();
var mm = dt.getMinutes();
var ss = dt.getSeconds();
return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss + '~~~'
}
}
})
</script>
</body>
</html>
本文地址：https://blog.csdn.net/qq_46469137/article/details/107536176