Vue封装全局过滤器Filters的步骤_vue.js

来源:脚本之家  责任编辑:小易  

Vue.filter( '过滤器名' , function(value) {        return value  * .5 ;  });输出变量的时候直接在后面加上:|过滤器名就可以了www.zgxue.com防采集请勿采集本网。

(PS:本文代码在vue-cli3构建的基础vue项目之上进行编写:vue create my-project)

放到单独的文件里,比如 util.js function hello(){ console.log("hello world");}function hi(){ console.log("hi");}export { hello, hi };

  在前后端分离的项目中,经常会有后台返回的数据需要经过处理才能显示到页面上的场景。

test: /\.js$/, loader: 'babel', exclude: /node_modules|vue\/dist|vuex\/dist/, }, { test: /\.vue$/, loader: 'vue' }, { test: /\.(pn

  使用最多的场景就是日期/时间、数字、字符串的格式化处理,实际业务中可能还有更复杂的数据处理逻辑。

过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器,过滤器通常会使用管道标志 “ | ”, 比如:

  下面就拿封装全局的处理数字和字符串的 filter 来展示 vue 如何 封装全局filter 并统一处理。

将数据转换为json的格式,然后在js文件里写 created:function(){ //用ajax或者vue-resource获取你的数据,并绑定到items里面 $.getJSON('url',function

一、定义/封装过滤器

清楚形参和实参吧。 setSelectedItem(message){ this.selected = message; }

  在 src目录 下新建 filters目录 用来专门存放全局过滤器,如果项目的过滤器过多,那么就要按类型分类。

  如果项目需要前台处理的数据不是太多,那么就在 filters目录 下新建一个 index.js 来存放所有的过滤器就足够了。

index.js代码如下:

// 封装过滤器// 过滤器的声明可以有下列多种写法/** * Number formatting by unit * like 10000 => 10k * @param {number} num * @param {number} digits * @return {string} */function numberFormatter(num, digits) { const si = [ { value: 1e18, symbol: "E" }, { value: 1e15, symbol: "P" }, { value: 1e12, symbol: "T" }, { value: 1e9, symbol: "G" }, { value: 1e6, symbol: "M" }, { value: 1e3, symbol: "k" } ]; for (let i = 0; i < si.length; i++) { if (num >= si[i].value) { return (num / si[i].value + 0.1).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol } } return num.toString();}/** * Number formatting by thousand * like 10000 => "10,000" * @param {number} num * @return {string} */const toThousandFilter = function(num) { return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))};/** * Upper case first char * like "wenyuan" => "Wenyuan" * @param {string} string * @return {string} */const uppercaseFirst = string => { return string.charAt(0).toUpperCase() + string.slice(1);};export default { numberFormatter, toThousandFilter, uppercaseFirst};

二、注册过滤器

  然后在 main.js 中引入注册即可使用:

import filters from "./filters"; // global filters// register global utility filtersObject.keys(filters).forEach(key => { Vue.filter(key, filters[key]);});

三、在组件内使用写好的过滤器

  在组件中使用:

<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"/> <h1>score:{{ score | numberFormatter }}</h1> <h1>score:{{ score | toThousandFilter }}</h1> <h1>username:{{ username | uppercaseFirst }}</h1> </div></template><script>export default { name: "home", components: {}, data() { return { score: 1200000, username: "wenyuan" }; }};</script>

四、效果

五、可能的报错与注意点

  在 main.js 中,要先定义过滤器, 再新建 vue 实例,否则会报Failed to resolve filter: xxx的错误。

以上就是Vue封装全局过滤器Filters的步骤的详细内容,更多关于vue封装过滤器的资料请关注真格学网其它相关文章! 您可能感兴趣的文章:vue指令v-html使用过滤器filters功能实例过滤器vue.filters的使用方法实现vue中filters 传入两个参数 / 使用两个filters的实现方法在Vue methods中调用filters里的过滤器实例vue自定义filters过滤器Vue 过滤器filters及基本用法Vue filters过滤器的使用方法

在user-list组件中我们需要2113遍历联系人列表,filter_key用来传给5261该组件,和搜索栏组4102件一样,也用props接收一下,并且在1653里面插入要过滤的内容,filterBy是返回过滤后的数组,orderBy是排序,前者的使用方法是filterBy 一个key(字段),in xxx 就是指搜索字段,这里需要注意的是in后面跟的必须是obj里面的key,因为我们的需求是同时保证输入汉字或者拼音都能查询,所以in后面跟的是okr_owner和user.u_name(这是vue渲染的数据,我们展示该联系人用的是里面的u_name,okr_owner则为拼音),下面附上数据结构。对于在搜索时如何去掉这些字母索引,我们只需要在通讯录页面中的<user-list>加入一个字段,然后使用watch来监听一下key_word即可内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • vue+element tabs选项卡分页效果
  • vue 实现html中根据类型显示内容
  • 详解vue3.0 前的 typescript 最佳入门实践
  • vue.js 初体验之chrome 插件开发实录
  • vue2.0 实现页面缓存和不缓存的方式
  • vue.js 和 mvvm 的注意事项
  • vue element upload实现图片本地预览
  • vue 设置 input 为不可以编辑的实现方法
  • vue使用vuex实现首页导航切换不同路由的方法
  • 前端框架vue.js构建大型应用浅析
  • 如何使用vuejs过滤器
  • vue.js filter怎么使用
  • vue.js 双向过滤器怎么用
  • vue 里面怎么调用过滤器方法
  • vue怎么实现封装方法
  • webpack中vuejs过滤器怎么写
  • vue.js 过滤器需要引用哪个js吗
  • vue 过滤器怎么传vue data里面定义的数据
  • vue.js filter 怎么传参数
  • vue过滤器结合异步函数的问题
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库vue指令v-html使用过滤器filters功能实例过滤器vue.filters的使用方法实现vue中filters 传入两个参数 / 使用两个filters的实现方法在vue methods中调用filters里的过滤器实例vue自定义filters过滤器vue 过滤器filters及基本用法vue filters过滤器的使用方法vue+element tabs选项卡分页效果vue 实现html中根据类型显示内容详解vue3.0 前的 typescript 最佳入门实践vue.js 初体验之chrome 插件开发实录vue2.0 实现页面缓存和不缓存的方式vue.js 和 mvvm 的注意事项vue element upload实现图片本地预览vue 设置 input 为不可以编辑的实现方法vue使用vuex实现首页导航切换不同路由的方法前端框架vue.js构建大型应用浅析vue引用js文件的多种方式(推荐)vue之父子组件间通信实例讲解(prvue props用法详解(小结)简单理解vue中props属性vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解详解vue 路由跳转四种方式 (带参使用vue实现图片上传的三种方式vue实现文件上传功能element ui 自定义正则表达式验证方法vue 实现双向绑定的四种方法vue socket.io源码解读element 默认勾选表格 togglerowselectiovue.js框架路由使用方法实例详解vue excel上传预览和table内容下载到exce浅谈针对vue相同路由不同参数的刷新问题详解vue中的props与data细微差别详解基于vue/react项目的移动端适配方案vue实现滑动到底部加载更多效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved