过滤器vue.filters的使用方法实现

2024-04-24 10:26:07

写项目的时候，有一些方法我们是需要全局使用的，比如数字的四色五入保留小数点啊、一些工具方法、字符的格式化啊等等。这些很多页面需要用的、使用频率极高的方法，我们一般会将其封装为全局的方法；我以前是这样做的，有这么几种方式：

1、挂载到vue.prototype

在main.js入口文件中挂载到vue.prototype，如我们封装一个获取时间戳的函数。

Vue.prototype.now = Date.now || function () {
  return new Date().getTime();
};

然后就可以在.vue页面中使用了

<script>
  export default {
    mounted(){
      console.log('now:' + this.now());
    },
  }
</script>

2、全局混入mixins

同样也还是在main.js中。

mixins的全局注入规则大家应该都懂，如果组件中没有这个getTime方法，那么就会在页面中注入这个方法。

Vue.mixin({
 data() {},
 methods: {
  getTime() {
   return new Date().getTime();
  }
 }
});
new App({
 el: '#app'
 // ...
});

3、关于vue.filters

（1）问题

前面两种方法弊端有很多，比如一般将全局变量挂载到prototype总是不太好的，状态管理我们用vuex；第二个全局混入的话，子组件中也会混入这些方法等等；最大的弊端就是代码的可读性和维护问题，如果项目体积大了，复用的方法多了，总不能都挂到prototye上去对吧？
这个时候，vue.filters过滤器就能够较好的解决这个问题。

（2）使用

先看一波官网-->传送门

ok，看完了，基本了解了过滤器的概念和基本使用方式以后，我们具体到项目中的使用。

新建一个filters文件夹，丢一行代码（很常用的一行代码，就是对数字做一些四舍五入的处理）

数字四舍五入保留两位小数点

main.js中引入

// global filters
import Vue from 'vue';
import * as filters from '@/filters'; 

Object.keys(filters).forEach((key) => {
 Vue.filter(key, filters[key]);
});

然后页面中就可以使用了

<div>{{num | formatAmountFixed2}}</div>

<script>
data(){
  return {
    num: 11111
  }
}
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue 过滤器filters及基本用法

1.示例代码采用vue单文件组件,使用moment插件格式化日期 <template> <div> <h1>{{date | dateFormat}}</h1> </div> </template> <script> import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { dat
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自定义filters过滤器

官方给出 Vue.filters(id , [definition]) //id {string} //definition {function} 详情查看在项目中我们如果有多个filters,那么我怎么一次注册,全局可用,我们在项目里新建一个filters文件夹,如下,index.js是出口文件,readMore是一个对字符串做处理的过滤器文件目录下面贴上代码: //index.js // 引入所有的过滤函数 import readMore from './readMore'; // 导
在Vue methods中调用filters里的过滤器实例

需求:vue中,除了在模板中使用过滤器,有时候,methods中也需要使用filters中的过滤器, 网友hongz1125提出的解决办法: this.$options.filters[filter](...args) //这种方法很简单,也很实用下面是我的方法,有点复杂.建议使用上面网友说的方法. filters: { formatScore(score) { if (score < 20) { score = '不合格'; } else if (score >= 20 &&
过滤器vue.filters的使用方法实现

写项目的时候,有一些方法我们是需要全局使用的,比如数字的四色五入保留小数点啊.一些工具方法.字符的格式化啊等等.这些很多页面需要用的.使用频率极高的方法,我们一般会将其封装为全局的方法:我以前是这样做的,有这么几种方式: 1.挂载到vue.prototype 在main.js入口文件中挂载到vue.prototype,如我们封装一个获取时间戳的函数. Vue.prototype.now = Date.now || function () { return new Date().getTime()
vue中filters 传入两个参数 / 使用两个filters的实现方法

先给大家介绍下vue中filters 传入两个参数 / 使用两个filters .vue 传入两个参数 <van-col>{{第一个参数|formatVisitTime(第二个参数)}}</van-col> 使用两个filters <van-tag plain :color="item.CreateTime(参数)|formatVisitDate(filters方法)|formatVisitDateColor(filters方法)">{{item.C
vue filters和directives访问this的问题详解

目录 vue filters和directives访问this directives所遇小bug vue filters和directives访问this 记录一次奇葩的需求. 要求自定义一个指令,点击后能跳转指定路由. directives和filters压根就没法访问this. 脑袋都想破了. 不废话了,上代码. <template> <div> <div v-join="(divData, that)">tag标签</div> &l
Django自定义模板过滤器和标签的实现方法

现在我们已经很熟悉Django的MTV模式了.模板(template)负责如何去展示数据,而视图(view)负责筛选出正确的数据.因此通常来说逻辑都是放到视图中的,但模板也需要一些和表示相关的逻辑 :比如循环展示(如 {% for ... %} ).或者以某种特定格式输出(如 {{ ...|date:'Y-m-d' }} )等,这些功能都是靠模板的过滤器(filters) 和标签(tags) 实现的. Django的模板语言包含了很多内置的过滤器和标签,设计目的是满足应用需要占位逻辑需求.
vue分类筛选filter方法简单实例

本文实例为大家分享了vue分类筛选filter方法的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <title>filter</title> </head> <body> <div id="app"> <ul> <li v-for="item in filterlist"
Vue的MVVM实现方法

本文介绍了Vue的MVVM实现方法,分享给大家,具体如下: 1. Object.defineProperty() 定义属性用意:给一个对象定义属性,那个属性原来是不存在的.这是一个初衷,属性是不存在的,需要额外添加. ①.使用说明 Object.defineProperty(obj,props) 第一个参数是将被添加或者修改的属性的对象第二个参数是一个对象,表示将要添加的一个或多个键值对一直要添加属性的具体配置 { '属性名':{value:'...',writable:true},
vue跨域解决方法

vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报"No 'Access-Control-Allow-Origin' header is present on the requested resource." 这种跨域错误. 要想本地正常的调试,解决的办法有三个: 一.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control
JSP使用Servlet过滤器进行身份验证的方法

本文实例讲述了JSP使用Servlet过滤器进行身份验证的方法.分享给大家供大家参考,具体如下: 1.Servlet过滤器的作用描述 (1)在HttpServletRequest到达Servlet 之前,拦截客户的HttpServletRequest. 根据需要检查HttpServletRequest,也可以修改HttpServletRequest头和数据. (2)在HttpServletResponse 到达客户端之前,拦截HttpServletResponse. 根据需要检查HttpServ
通过命令行生成vue项目框架的方法

本文介绍了通过命令行生成vue项目框架的方法,现在分享给大家 -- 安装nodejs 用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的, 所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识: nodejs安装: http://www.jb51.net/article/113457.htm npm 介绍: http://www.jb51.net/article/87893.htm -- 安装命令行工具 npm inst

过滤器vue.filters的使用方法实现

相关推荐

随机推荐