【Vue】filter 过滤器用法

文章目录

一、全局过滤器
二、局部过滤器

一、全局过滤器

语法：

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>

运行结果：

【Vue】filter 过滤器用法相关推荐

vue filter 过滤器详解
Vue.js 允许你自定义过滤器filter,可被用于一些常见的文本格式化. (注意vue版本号不同用法也稍有不同) 接下来咱们就记录一下最常用的filter过滤器用法.(该示例以多个过滤器为例,当 ...
vue+filter过滤器（多参数）传参 - 代码篇
vue+filter过滤器(多参数)传参 - 代码篇传1个参数 //html {{a1 | filterAa}} //js filters:{filterAa(a1){// a1是传入的参数} } ...
Vue.filter过滤器存储单位换算按B、KB 、M、 G显示字节大小
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示: &l ...
Vue中过滤器用法详解
一.什么是过滤器 Vue.js官方文档说明:可被用于一些常见的文本格式化. 个人理解就是把一些不需要的东西过滤掉,只是对数据进行加工处理然后返回处理后的数据,和计算属性很相似. 二.如何使用过滤器过 ...
Filter过滤器用法与说明
Vue的过滤器,生命周期的钩子函数和使用Vue-router
一.过滤器 1.局部过滤器在当前组件内部使用过滤器给某些数据添油加醋 //声明 filters:{'过滤器的名字':function(val,a,b){//a 就是alax ,val就是当前的数 ...
vue+filter+html标签,vue过滤器用法实例分析
本文实例讲述了vue过滤器用法.分享给大家供大家参考,具体如下: 过滤器: vue提供过滤器: capitalize uppercase currency.... {{msg|currency ￥}} ...
methods vue 使用过滤器_Vue.js中过滤器（filter）的使用
Vue.js 过滤器的基本使用(filter) vue中的过滤器分为两种:局部过滤器和全局过滤器 1.定义无参全局过滤器 Vue.filter('msgFormat', function(msg) { ...
vue filter对象_vue 过滤器
vue 过滤器 1 关于 vue 过滤器在vue1.0的时候其实是内置了过滤器的,但是考虑到好多过滤器并不一定会被开发所调用,所以把原本内置的过滤器就给去掉了,但是过滤器还是比较普遍的,所以我们从v ...

【Vue】filter 过滤器用法

文章目录

一、全局过滤器

二、局部过滤器

【Vue】filter 过滤器用法相关推荐

最新文章

热门文章