一、过滤器
概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;
1.1全局过滤器
过滤器的定义语法
Vue.filter('过滤器的名称', function(){})
//过滤器中的 function ,第一个参数,已经被规定死了,永远都是 过滤器 管道符前面 传递过来的数据
Vue.filter('过滤器的名称', function (data) {
return data + '123'
})
过滤器调用时候的格式
{{ name | 过滤器的名称 }}
举例:
<body>
<div id="app">
<h2>{{ msg | test }}</h2>
</div>
<script>
// 自定义全局一个过滤器
Vue.filter("test",function(msg){
return msg + '+++全局过滤器';
})
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '曾经,我也是一个单纯的少年'
},
methods: {}
});
结果:
传入参数:
<body>
<div id="app">
//传参
<h2>{{ msg | test('参数1','参数2') }}</h2>
</div>
<script>
// 自定义一个过滤器
Vue.filter("test",function(msg, arg1, arg2){
// return msg + '+++全局过滤器';
//将曾经替换为参数1 和参数二
return msg.replace(/曾经/g,arg1 + arg2);
})
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '曾经,我也是一个单纯的少年'
},
methods: {}
});
</script>
</body>
结果:
1.2 私有过滤器
filters: { // 私有局部过滤器,只能在 当前 VM 对象所控制的 View 区域进行使用
dom:
<td>{{ item.ctime | dateFormat() }}</td>
// 如何自定义一个私有的过滤器(局部)
var vm2 = new Vue({
el: '#app2',
data: {
dt: new Date()
},
methods: {},
filters: { // 定义私有过滤器 过滤器有两个 条件 【过滤器名称 和 处理函数】
// 过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候 优先调用私有过滤器
dateFormat: function (dateStr, pattern = '') {
// 根据给定的时间字符串,得到特定的时间
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = (dt.getMonth() + 1).toString().padStart(2, '0')
var d = dt.getDate().toString().padStart(2, '0')
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
//使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='')
//或 String.prototype.padEnd(maxLength, fillString='')来填充字符串;
var hh = dt.getHours().toString().padStart(2, '0')
var mm = dt.getMinutes().toString().padStart(2, '0')
var ss = dt.getSeconds().toString().padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
}
}
}
二、自定义按键修饰符
通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名:
// 自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113
使用自定义的按键修饰符:
<input type="text" v-model="name" @keyup.f2="add">