一、全局过滤器
- 语法:
-
Vue.filter(name,function) - name: 过滤器名称 - function: 执行函数,必须有一个过滤后的返回值 使用方法:变量名 | 过滤器名称 {{name | function()}}
- 示例:
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- 使用双大括号显示vue定义的变量内容 --> <p>{{aa | toUpper}}</p> <p>{{aa | subFilter(1)}}</p> </div> <!-- 引入vue插件 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // 定义全局过滤器,需要放在new Vue前面 Vue.filter("toUpper", (val) => { console.log("toUpper 过滤器触发了", val); // 小写字母转大写字母 return val.toUpperCase(); }) // val:使用过滤器的变量 // num:过滤器要传的参数 Vue.filter("subFilter", (val, num) => { console.log("subFilter 过滤器触发了", val, num); // substring:截取字符串 return val.substring(0, num); }) // 声明vue的对象 var app = new Vue({ el: "#app", // 将vue对象挂载到dom节点 data: { // 定义vue对象的数据 aa: 'hello', BB: 'WORLD', }, }) </script> </body> </html>
运行结果:
-
二、局部过滤器
语法:
-
filters: { name: function(), } - name: 过滤器名称 - function: 执行函数,必须有一个过滤后的返回值 使用方法:变量名 | 过滤器名称 {{name | function()}}
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 使用双大括号显示vue定义的变量内容 -->
<p>{{BB | toLower}}</p>
</div>
<!-- 引入vue插件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 声明vue的对象
var app = new Vue({
el: "#app", // 将vue对象挂载到dom节点
data: { // 定义vue对象的数据
aa: 'hello',
BB: 'WORLD',
},
// 局部过滤器
filters: {
toLower: (val) => {
console.log(val);
// 大写字母转小写
return val.toLowerCase();
}
}
})
</script>
</body>
</html>
运行结果