Vue过滤器filter
程序员文章站
2022-07-15 10:46:56
...
过滤器的定义语法：
Vue.filter('过滤器的名称',function () {})
过滤器两个条件：过滤器名称，处理函数。
过滤器中的function ，第一个参数已经被规定死了，永远是 过滤器 管道符 前面传递过来的数据
全局过滤器 简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 过滤器调用格式 ： {{ name | 过滤器的名称 }} -->
<p>{{msg | myfilter}}</p>
</div>
<script>
// 过滤器的定义语法：
// Vue.filter('过滤器的名称',function () {})
// 过滤器中的function ，第一个参数已经被规定死了，永远是 过滤器 管道符 前面传递过来的数据
// Vue.filter('过滤器的名称', function (data) {
// return data + '123';
// })
// 定义一个Vue全局过滤器 名称：myfilter
Vue.filter('myfilter',function (msg) {
// 字符串的replace 方法，第一个参数，除了可以是字符串之外，也可以是一个正则
return msg.replace(/单纯/g, '现实');
});
var vm = new Vue({
el: '#app',
data: {
msg: '我们都曾经很单纯，单纯的以为一切都是美好的，很快乐的生活着。'
},
methods: {}
});
</script>
</body>
</html>function传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 过滤器调用格式 ： {{ name | 过滤器的名称 }} -->
<!-- 传一个参数 -->
<!-- <p>{{msg | myfilter('简单')}}</p> -->
<!-- 传多个参数 -->
<p>{{msg | myfilter('简单','且疯狂')}}</p>
</div>
<script>
// 定义一个Vue全局过滤器 名称：myfilter
Vue.filter('myfilter',function (msg,arg,arg2) {
return msg.replace(/单纯/g, arg+arg2);
});
var vm = new Vue({
el: '#app',
data: {
msg: '我们都曾经很单纯，单纯的以为一切都是美好的，很快乐的生活着。'
},
methods: {}
});
</script>
</body>
</html>可以多个过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 过滤器调用格式 ： {{ name | 过滤器的名称 }} -->
<p>{{msg | myfilter('简单','且疯狂') | test}}</p>
</div>
<script>
Vue.filter('myfilter',function (msg,arg,arg2) {
return msg.replace(/单纯/g, arg+arg2);
});
Vue.filter('test',function (msg) {
return msg + '========';
});
var vm = new Vue({
el: '#app',
data: {
msg: '我们都曾经很单纯，单纯的以为一切都是美好的，很快乐的生活着。'
},
methods: {}
});
</script>
</body>
</html>私有过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>私有过滤器</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg | myfilter('快乐的生活着')}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '我们都曾经很单纯，单纯的以为一切都是美好的。'
},
methods: {},
// 私有过滤器
filters: {
myfilter: function (msg,arg) {
return msg + arg;
}
}
});
</script>
</body>
</html>过滤器调用的时候，采用就近原则。如果私有过滤器与全局过滤器名称一样了，优先调用私有过滤器
字符串的padStart方法使用,例如时间前面补零。
上一篇： 数组中只出现一次的数字（Java）
下一篇： Filter