是先做微信小程序_Vue封装全局过滤器Filters的步骤

  • 栏目:公司新闻 时间:2021-01-05 10:56 分享新闻到:
<返回列表

Vue封装全局过滤器Filters的步骤       这篇文章主要介绍了Vue封装全局过滤器Filters的步骤,通过封装vue全局过滤器实现filters的统一管理。感兴趣的朋友可以了解下

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

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

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

一、定义/封装过滤器

在 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 filters
Object.keys(filters).forEach(key = {
 Vue.filter(key, filters[key]);
});

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

在组件中使用:

 template 
 div 
 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封装全局过滤器Fi

公司新闻 2021-01-05
Vue封裝全局性过虑器Filters的流程 本文关键详细介绍了Vue封裝全局性过虑器Filters的流程,...
查看全文

微信小程序微店_Openlayers测量间隔与面积

公司新闻 2021-01-05
Openlayers精确测量间距与总面积的完成方式 本文关键为大伙儿详尽详细介绍了Openlayers精确...
查看全文

广州凡科互联网科技股份有限公司招聘销

公司新闻 2021-01-04
招聘人数:6职位信息岗位职责:1负责通过网络(qq、微信)主动联系客户,向客户提供产品的...
查看全文
返回全部新闻


区域站点: 南丰县长图制作   南宫市在线编辑图片   囊谦县图片加文字怎么制作   南和县怎样抠图   南华县长图制作   南江县在线编辑图片   南京市图片加文字怎么制作   南靖县怎样抠图   南康市长图制作   南乐县在线编辑图片   南陵县图片加文字怎么制作   南宁市怎样抠图   南平市长图制作   南皮县在线编辑图片   南市区图片加文字怎么制作   南通市怎样抠图   南投县长图制作   南雄市在线编辑图片   南溪县图片加文字怎么制作   南阳市怎样抠图   南漳县长图制作   南召县在线编辑图片   南郑县图片加文字怎么制作   那坡县怎样抠图   那曲县长图制作   纳雍县在线编辑图片   讷河市图片加文字怎么制作   内黄县怎样抠图   内江市长图制作   内丘县在线编辑图片   内乡县图片加文字怎么制作   嫩江市怎样抠图   聂荣县长图制作   尼玛县在线编辑图片   尼木县图片加文字怎么制作   宁安市怎样抠图   宁波市长图制作   宁城县在线编辑图片   宁德市图片加文字怎么制作   宁都县怎样抠图   宁国市长图制作   宁海县在线编辑图片   宁化县图片加文字怎么制作   宁晋县怎样抠图   宁陵县长图制作   宁明县在线编辑图片   宁南县图片加文字怎么制作   宁强县怎样抠图   宁陕县长图制作   宁武县在线编辑图片   宁乡市图片加文字怎么制作   宁阳县怎样抠图   宁远县长图制作   农安县在线编辑图片   磐安县图片加文字怎么制作   盘锦市怎样抠图   盘山县长图制作   磐石市在线编辑图片   盘州市图片加文字怎么制作   蓬安县怎样抠图   澎湖县长图制作   蓬莱市在线编辑图片   彭山县图片加文字怎么制作   蓬溪县怎样抠图   彭阳县长图制作   彭泽县在线编辑图片   彭州市图片加文字怎么制作   偏关县怎样抠图   平安县长图制作   平昌县在线编辑图片   平定县图片加文字怎么制作   屏东县怎样抠图   平度市长图制作   平果县在线编辑图片   平和县图片加文字怎么制作   平湖市怎样抠图   平江县长图制作   平乐县在线编辑图片   平凉市图片加文字怎么制作   平利县怎样抠图   平罗县长图制作   平陆县在线编辑图片   屏南县图片加文字怎么制作   平泉市怎样抠图   屏山县长图制作   平顺县在线编辑图片   平塘县图片加文字怎么制作   平潭县怎样抠图   平武县长图制作   萍乡市在线编辑图片   平乡县图片加文字怎么制作   平阳县怎样抠图   平遥县长图制作   平阴县在线编辑图片   平邑县图片加文字怎么制作   平远县怎样抠图   平舆县长图制作   皮山县在线编辑图片   普安县图片加文字怎么制作   浦北县怎样抠图   浦城县长图制作   普洱市在线编辑图片   普格县图片加文字怎么制作   浦江县怎样抠图   普兰县长图制作   普宁市在线编辑图片   莆田市图片加文字怎么制作   迁安市怎样抠图   乾安县长图制作   潜江市在线编辑图片   潜山市图片加文字怎么制作  

友情链接: 贴图软件 在线免费抠图 制作图片加文字的 在线一键抠图

Copyright © 2002-2020 图片加文字怎么制作_怎样抠图_长图制作_在线编辑图片_如何制作水印图片logo 版权所有 (网站地图) 备案号:粤ICP备10235580号