Vue的全局过滤器和私有过滤器的实现

2024-03-31 15:21:53

Vue允许自定义过滤器可被用作一些常见的文本格式化

过滤器可以用在两个地方：mustache插值表达式和 v-bind表达式

过滤器应被添加在JavaScript表达式的尾部由“管道”符指示(管道符就是一个竖杠：|)

一、全局过滤器

全局过滤器调用时的基本格式：

通过管道符[|]来进行过滤例如{{name | nameOpe}}
定义过滤器的语法：Vue.filter("过滤器名称",处理函数)

处理函数的第一个参数已被固定了是data 即管道符前面传递的数据
若要添加其它入参只能添加在data的后面了

Vue.filter("",function(data)
{
  return data+"123";
})

(上述例子中该过滤器的功能就是给过滤器前面的数据加上"123"字符串)

一个值得注意的地方是：过滤器并没有修改原数据只是在输出之前进行了一层处理

<div id="app">
	<p>{{msg | msgFormat}}</p>
</div>

<script>
  // Vue全局过滤器
  Vue.filter("msgFormat",function(data){
    // replace()方法的第一个参数支持正则表达式
    return data.replace(/陈涛/g,"李强");
  })

  var vm=new Vue({
    el:'#app',
    data:{
      msg:"我的名字叫陈涛，一天早上，同学碰见我，向我打招呼：'陈涛，你好！'"
    }
  });
</script>

过滤器也可以传入参数且还能传多个参数

<div id="app">
	<!-- 过滤器也可以传参 还能传多个参数 -->
	<p>{{msg | msgFormat("豪哥","111")}}</p>
</div>

<script>
  // Vue全局过滤器
  Vue.filter("msgFormat",function(data,arg1,arg2){
    // replace()方法的第一个参数支持正则表达式
    return data.replace(/陈涛/g,arg1+arg2);
  })

  var vm=new Vue({
    el:'#app',
    data:{
      msg:"我的名字叫陈涛，一天早上，同学碰见我，向我打招呼：'陈涛，你好！'"
    },
    methods:{}
  });
</script>

还能多次调用过滤器被调用的过滤器会按顺序执行

<div id="app">
	<!-- 调用多个过滤器 -->
	<p>{{msg | msgFormat("豪哥","111") | test}}</p>
</div>

<script>
  // Vue全局过滤器
  Vue.filter("msgFormat",function(data,arg1,arg2){
    // replace()方法的第一个参数支持正则表达式
    return data.replace(/陈涛/g,arg1+arg2);
  })

  // 可多次调用过滤器
  Vue.filter("test",function(msg)
  {
    return "<<<"+msg+">>>"
  })

  var vm=new Vue({
    el:'#app',
    data:{
      msg:"我的名字叫陈涛，一天早上，同学碰见我，向我打招呼：'陈涛，你好！'"
    },
    methods:{}
  });
</script>

这两个过滤器组合起来顺序执行输出结果就是：

二、私有过滤器

全局过滤器是能够被所有的Vue实例共享因而得名
那么同理私有过滤器就是只能被定义的那个Vue实例使用

过滤器的调用顺序采用的是就近原则
即若有私有过滤器则会优先使用私有过滤器若没有私有过滤器则会使用全局过滤器

每个过滤器有其自己的【名称】和【处理函数】

定义私有过滤器的时候也是在Vue实例里定义的
有个filters属性专门用来定义私有过滤器
格式就是：过滤器名:方法

以一个日期格式转换过滤器作为例子：

<div id="app2">
	<h3>{{date | dateFormat}}</h3>
</div>

// 自定义私有过滤器
var vm2=new Vue({
  el:'#app2',
  data:{
    date:new Date()
  },
  methods:{},
  // 定义私有过滤器
  filters:{
    dateFormat:function(dateStr,pattern="")
    {
      var dt=new Date(dateStr);

      var year=dt.getFullYear();
      var month=dt.getMonth()+1;
      var day=dt.getDate();

      if (pattern.toLowerCase()==="yyyy-mm-dd")
      {
        return `${year}-${month}-${day}`;
      }
      else
      {
        var hour=dt.getHours();
        var minute=dt.getMinutes();
        var second=dt.getSeconds();

        return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      }
    }
  }
})

到此这篇关于Vue的全局过滤器和私有过滤器的实现的文章就介绍到这了,更多相关Vue的全局过滤器和私有过滤器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue实现自带的过滤器实例

一过滤器写法 {{ message | Filter}} 二 Vue自带的过滤器:capitalize 功能:首字母大写 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue自带的过滤器</title> <meta name="viewport" content="width=device-width,i
Vue.js -- 过滤器使用总结

过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,过滤器通常会使用管道标志 " | ", 比如: {{ msg | capitalize }} // 'abc' => 'ABC' uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器. VueJs允许你链式调用过滤器,简单的来说,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤.接下来,我们可以想象一个比较简单的例子,使用了Vue的 filterBy +
vue-cli 3 全局过滤器的实例代码详解

在vue1.x版本里是自带里几个基础的过滤器的(虽然不怎么用到). 到了vue2.x版本之后,内置到几个过滤器就被删掉了,如果需要用到过滤器,就要开发者自己去定义. 可以把过滤器定义在某个组件内部,但这样就成了局部过滤器,在别的组件里是无法使用的.所以通常不会这么做. 也可以把过滤器写在main.js里.但如果项目中存在多个过滤器,这会使main.js文件看上去很庞大,不便于后期维护. 所以通常会新建一个js文件,专门用来存放所有过滤器.最后再引到main.js中供全局使用. 1.创建 filt
Vue.js学习之过滤器详解

前言在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.阅读这这篇文中的前提是你对Vue已经有了基本的语法基础. Vue.Js中的过滤器基础过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使用管道标志 " | ", 比如: {{ msg | capitalize }} // 'abc' => 'ABC' upper
vue 过滤器filter实例详解

vue的过滤器一般在JavaScript 表达式的尾部,由"|"符号指示: 过滤器可以让我们的代码更加优美,一般可以用在时间格式化,首字母大写等等. 例如:{{ date | dateFormat }}这是过滤器的写法:{{ dateFormat(date) }}这是函数调用的写法可以看出过滤器的写法更加语义化,让人一眼可以看出它的含义.  {{ message | capitalize }} <!-- 在 `v-bind` 中 --&
Vue filters过滤器的使用方法

本文实例为大家分享了Vue filters过滤器使用,供大家参考,具体内容如下实例先来看看一段代码理解下 html <div id="app"> {{message | filters2| filters3(true,priceCount)}} </div> js var app = new Vue({ el: "#app", data: { message: 199, priceCount:.8 }, filters:{ filters
vue数字类型过滤器的示例代码

需求只能输入数字输入字母和特殊字符自动过滤掉输入完成失焦自动加.00 如果输入了小数自动四舍五入为22.22类似这样格式效果图可以使用在普通js和angular里面,vue 直接调用先上调用的函数 /** * User: sheyude * Date: 2017/9/4 0004 * Time: 上午 10:51 * */ let number = { twoWay: true, bind:function (el) { el.addEventListener('blur',func
Vue.js每天必学之过滤器与自定义过滤器

基础类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('reverse', function (value) { return value.split('').reverse().join('') })  <span v-text="message | reverse">&
Vue的全局过滤器和私有过滤器的实现

Vue允许自定义过滤器可被用作一些常见的文本格式化过滤器可以用在两个地方:mustache插值表达式和 v-bind表达式过滤器应被添加在JavaScript表达式的尾部由"管道"符指示(管道符就是一个竖杠:|) 一.全局过滤器全局过滤器调用时的基本格式: 通过管道符[|]来进行过滤例如{{name | nameOpe}} 定义过滤器的语法:Vue.filter("过滤器名称",处理函数) 处理函数的第一个参数已被固定了是data 即管道符前面传递的
vue定义私有过滤器和基本使用

私有过滤器和全局过滤器的方法和概念都相同,只是一个是全局都可以调用,而私有的只有自己可以调用, 全局过滤器点这里全局过滤器使用方法也和全局过滤器一致,只是定义的地方不同全局过滤器是在 script 中通过Vue.filter 定义私有过滤器定义方法: <script> let vm = new Vue({ el:'#app', data:{ }, filters: { // 当前实例私有的过滤器 } }) </script> 在vm实列中,有和 data 同级的 filte
Vue封装全局过滤器Filters的步骤

(PS:本文代码在vue-cli3构建的基础vue项目之上进行编写:vue create my-project) 在前后端分离的项目中,经常会有后台返回的数据需要经过处理才能显示到页面上的场景. 使用最多的场景就是日期/时间.数字.字符串的格式化处理,实际业务中可能还有更复杂的数据处理逻辑. 下面就拿封装全局的处理数字和字符串的 filter 来展示 vue 如何封装全局filter 并统一处理. 一.定义/封装过滤器在 src目录下新建 filters目录用来专门存放全局过滤器,如果项
详解AngularJS中$filter过滤器使用(自定义过滤器)

1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般
vue自定义全局组件(自定义插件)的用法

有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用element-ui的时候是使用Vue.use()语句来使用的,而axios的时候,不用Vue.use(),只要import就可以导入进来了,感觉很神奇,细细的发现,原来他们的不同是因为axios里面并没有写install方法,而element-ui就有写这个方法,下面就利用这个install来写一个自己的插件
vue的全局提示框组件实例代码

这篇文章给大家介绍一个vue全局提示框组件,具体代码如下所示: <template>  <div v-show="visible" class="dialog-tips dialog-center"> <div>{{message}}</div> </div> </template> <script> export default { data
vue 组件全局注册和局部注册的实现

全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-title',{ props:['title'], template:'<li v-on:click="$emit(\'change\')">{{title}}</li>' }) Vue.component('tab-content',{ props:['content
vue bus全局事件中心简单Demo详解

1.vue-cli搭建好项目之后,使用npm安装vue-bus npm install vue-bus 2.在入口文件main.js中全局注册 import Vue from 'vue'; import VueBus from 'vue-bus'; Vue.use(VueBus); 3.传递数据: this.$bus.emit("eventName",data) 4.接收数据: this.$bus.on("eventName",data) 5.注意事项 this的
Vue项目全局配置微信分享思路详解

这个项目为移动端项目,主要用于接入公众号服务.项目采用两种登录方式,微信授权登录以及账号密码登录.对于移动端项目而言,为了便于项目扩展以及提供开发热更新速度,项目分为不同的模块,每个模块是一个单页面应用.页面分为两种,一种是需要用户登录之后才能浏览,另一种是用户无需登录即可浏览.无论哪一种,均配置微信分享. 使用的技术 1.使用vue作为框架 2.使用vux作为UI组件库全局配置微信分享思路 1.区分一般和特殊,一般情况,全局配置默认分享文案:特殊情况分两种,一种是分享内容不需要异步获取,则在
Vue自定义全局Toast和Loading的实例详解

如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast.那么我们就自定义这两个组件吧. 1.Toast组件首先,在common下新建global文件夹,存放我们的toast.vue和toast.js两个文件(当然文件的具体位置你可以自行安排). (1). toast.vue <template lang="html"> <div v-if="isShowToast" class="toa

Vue的全局过滤器和私有过滤器的实现

相关推荐

随机推荐