黑马vue---28、vue中全局过滤器的基本使用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、总结

一句话总结：

vue中的过滤器可以传递参数（根据参数来过滤），也可以用管道符拼接多个过滤器：例如<p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>

1、vue中如何创建全局过滤器（在单个vue外）？

Vue.filter()，第一个参数是过滤器名称，第二个是过滤器的函数体

// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// 字符串的 replace 方法，第一个参数，除了可写一个字符串之外，还可以定义一个正则
return msg.replace(/单纯/g, arg + arg2)
})

2、vue中如何使用全局过滤器？

第一个是要使用过滤器的字符串，后面用管道符接多个过滤器，过滤器中可以接参数：<p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>

3、全局过滤器和私有过滤器的区别？

全局过滤器定义在全局，全局可以使用

私有过滤器定义在某个vue中，在这个vue控制的区域才能使用

4、当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用？

局部过滤器优先于全局过滤器被调用

二、vue中全局过滤器的基本使用

1、效果图

2、代码

<!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>
<script src="./lib/vue-2.4.0.js"></script>
</head> <body>
<div id="app">
<p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>
</div> <script>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// 字符串的 replace 方法，第一个参数，除了可写一个字符串之外，还可以定义一个正则
return msg.replace(/单纯/g, arg + arg2)
}) Vue.filter('test', function (msg) {
return msg + '========'
}) // 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
},
methods: {}
});
</script>
</body> </html>

三、过滤器

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

私有过滤器

HTML元素：

<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>

私有 filters 定义方式：

filters: { // 私有局部过滤器，只能在当前 VM 对象所控制的 View 区域进行使用 dataFormat(input, pattern = "") { // 在参数列表中通过 pattern="" 来指定形参默认值，防止报错 var dt = new Date(input); // 获取年月日 var y = dt.getFullYear(); var m = (dt.getMonth() + 1).toString().padStart(2, '0'); var d = dt.getDate().toString().padStart(2, '0'); // 如果传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回年-月-日 // 否则，就返回年-月-日时：分：秒 if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { // 获取时分秒 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}`; } } }

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；

全局过滤器

// 定义一个全局过滤器Vue.filter('dataFormat', function (input, pattern = '') { var dt = new Date(input); // 获取年月日 var y = dt.getFullYear(); var m = (dt.getMonth() + 1).toString().padStart(2, '0'); var d = dt.getDate().toString().padStart(2, '0'); // 如果传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回年-月-日 // 否则，就返回年-月-日时：分：秒 if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { // 获取时分秒 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---28、vue中全局过滤器的基本使用