Vue-Cli中自定义过滤器的实现代码

2024-12-06 10:44:09

本文主要介绍了Vue-Cli中自定义过滤器，分享给大家，也给自己做个笔记

vue2里面移除了内置过滤器，所有过滤器都需要自己定义。

以下例子是使用webpack模版自定义一个日期格式过滤器的例子。

文件结构

.
├── src
│  ├── Filters
│  │  ├── DataFormat.js
│  │  └── index.js
│  └── main.js
└── ...

所有过滤器都放在Filters文件夹下，剩下的就是webpack模版的文件结构，在这里就不完全写出来。

Filters/DataFormat.js

这个文件主要是写了过滤器实现的方法，然后export进行导出。

export default (time, fmt) => {

 fmt = fmt || 'yyyy-MM-dd hh:mm';
 let date = new Date(time);

 if (/(y+)/.test(fmt)) {
  fmt = fmt.replace(
   RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)
  );
 }

 let dt = {
  'M+': date.getMonth() + 1,
  'd+': date.getDate(),
  'h+': date.getHours(),
  'm+': date.getMinutes(),
  's+': date.getSeconds()
 }

 for (let key in dt) {
  if (new RegExp(`(${key})`).test(fmt)) {
   let str = dt[key] + ''
   fmt = fmt.replace(RegExp.$1,
    (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length)
   );
  }
 }

 return fmt;
}

这段代码是在网上找的，我只是对其中稍作修改。

Filters/index.js

这里把所有自定义的过滤器都汇总，方便待会在main.js中一次性添加到全局过滤器中。

如果有多个自定义的过滤器就只需要在这个文件内依次导出就行。

// 导出日期过滤器
import dateFormat from './DateFormat'

// 导出的时候以key value的形式导出，这里就设置了在全局过滤器中的过滤器名字。
export {dateFormat}

// 可以继续导出其他的过滤器

src/main.js

这个文件是程序的主入口，一般负责配置相关的东西。所以添加过滤器的工作毫无疑问的交给它了（也只有在这里能够拿到Vue对象）。

// 默认会找 Filters/index.js
import * as filters from './Filters/'

// 遍历所有导出的过滤器并添加到全局过滤器
Object.keys(filters).forEach((key) => {
 Vue.filter(key, filters[key]);
})

使用

使用起来很简单，和正常的使用方式一摸一样，写在项目中需要的.vue文件中即可

<template>

  <!-- 2017-08-11 21:21 -->
  <h1>{{ new Date() | dateFormat }}</h1>

  <!-- 2017年08月11日 21:21:05 -->
  <h1>{{ new Date() | dateFormat('yyyy年MM月dd日 hh:mm:ss') }}</h1>

</template>

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

详解Vue自定义过滤器的实现

一自定义过滤器(注册在Vue全局) 注意事项: (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 (2) 过滤器函数始终以表达式的值作为第一个参数.带引号的参数视为字符串,而不带引号的参数按表达式计算 (3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突 (4)用户从input输入的数据在回传到model之前也可以先处理 <!DOCTYPE html> <html> <head> <meta charset=&qu
详解vue过滤器在v2.0版本用法

1.x写法 <body> <div id="app"> {{html|uppercase}} </div> <script> new Vue({ el:'#app', data:{ msg:"123", html:"abc" } }) </script> </body> 但是2.0中已经废弃了过滤器,需要我们自定义 <div id="app">
Vue2.0实现1.0的搜索过滤器功能实例代码

Vue2.0删除了很多1.0的比较实用的过滤器,如filterBy,orderBy.官方文档给了通过计算属性实现1.0搜索过滤器功能,自己又加入了大小写通用检索功能,比较简单,学一下. <body> <div class="app"> <input type="text" v-model="name"> <ul> <li v-for="user in newUsers" &
vue货币过滤器的实现方法

自定义事件也可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定. 所以要让组件的 v-model 生效,它必须: 接受一个 value 属性在有新的 value 时触发 input 事件代码如下: HTML: <div id="app"> <p>{{ message }}</p> <currency-input label="Price" v-model="price">
Vue.js学习之过滤器详解

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

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

1.过滤器的用法,用 '|' 分割表达式和过滤器. 例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数. 用两个过滤器:{{msg | myfilter | myfilternumber }} 2.自定义的过滤器过滤器的结构为:Vue.filter("id",function(value,a){}); value是过滤器的一个参数,也是默认的原始值.a是自定义的一个参数. 自定义过滤器的例子: <!DO
Vue.js -- 过滤器使用总结

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

方法一: // template {{a | data}} //script data:{ a: Date.now() } filters: { data:function (input) { var d = new Date(input); var year = d.getFullYear(); var month = d.getMonth() + 1; var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate(); var
Vue-Cli中自定义过滤器的实现代码

本文主要介绍了Vue-Cli中自定义过滤器,分享给大家,也给自己做个笔记 vue2里面移除了内置过滤器,所有过滤器都需要自己定义. 以下例子是使用webpack模版自定义一个日期格式过滤器的例子. 文件结构 . ├── src │ ├── Filters │ │ ├── DataFormat.js │ │ └── index.js │ └── main.js └── ... 所有过滤器都放在Filters文件夹下,剩下的就是webpack模版的文件结构,在这里就不完全写出来. Filters/D
vue项目中自定义video视频控制条的实现代码

最近公司项目中,添加了视频模块,但是产品觉得Video自带的控制条有点LOW,于是自己设计了一个.于是开始了自定义Video控制的采坑之旅.. 首页效果图: 需求描述: 当鼠标放在图片上的时候,自动播放视频,并显示预览进度条,当鼠标移开,显示预览图片,再次hover图片,继续上次播放视频详情页的效果图: 需求描述: 能自定义的暂停和播放模仿进度条可实现拖拽播放速度显示当前时间能选择倍速能控制声音能全屏播放接下来一步步的实现首先康康首页的,上结构代码: <div class="
springmvc+shiro自定义过滤器的实现代码

实现需求: 1.用户未登录,跳转到登录页,登录完成后会跳到初始访问页. 2.用户自定义处理(如需要激活),跳转到激活页面,激活完成后会跳到初始访问页. 使用到的框架 springmvc 的拦截器 shiro 自定义过滤器实现: 1.编写拦截器通过session保存初始访问的页面地址,便于后面回跳这个页面做准备. import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.web.serv
在vue项目中使用codemirror插件实现代码编辑器功能

在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示),具体内容如下所示: 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 <template> <textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;&quo
vue cli 3.0通用打包配置代码,不分一二级目录

1.项目根目录下新建vue.config.js,进行如下配置即可 module.exports={ publicPath:'', }; 补充知识:Vue-CLI3.0更改打包配置在实际项目开发中,我们一般会直接使用vue.vue-cli来搭建项目.vue框架的宗旨就是让初学者轻松上手,所以,对于打包配置的一些东西,vue的脚手架已经帮我们做好了完美的封装,让我们达到安装既用的效果,也不用担心太多不会做打包配置的问题. 在前期使用Vue-CLI2.0搭建项目时,我们可以在build目录下,直接修
Vue CLI中模式与环境变量的深入详解

前言在实际项目的开发中,我们一般会经历项目的开发阶段.测试阶段和最终上线阶段,每一个阶段对于项目代码的要求可能都不尽相同,那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果,使用不同的功能呢? 这里就需要引入环境的概念.官方文档中模式和环境变量说明一般一个项目都会有以下 3 种环境: 开发环境(开发阶段,本地开发版本,一般会使用一些调试工具或额外的辅助功能): 测试环境(测试阶段,上线前版本,除了一些 bug 的修复,基本不会和上线版本有很大差别): 生产环境(上线阶段,正式对
Vue cli+mui 区域滚动的实例代码

vue cli+mui配合使用达到区域滚到的效果 ,方法如下第一步引入mui css js @import url("/static/mui.min.css"); JS import mui from '../../../static/mui.min.js'; 第二步写结构 mui的区域滚动结构是这样的 <div class="mui-scroll-wrapper"> <div class="mui-scroll">
使用Vue.js中的过滤器实现幂方求值的方法

1.应用场景使用ElementUI实现一个输入框,输入100,下方显示10000. 2.实现源码 (1)主页面 <template> <el-row> <el-tabs v-model="activeName" @tab-click="handlerClick"> <el-tab-pane label="饼图" name="pie2D"> <el-date-picker
VUE组件中的 Drawer 抽屉实现代码

因为项目中用的是 element-ui 框架,而这个框架并没有抽屉组件,所以自己实现一个,具体代码如下: drawer.vue <template> <div class="drawer"> <div :class="maskClass" @click="closeByMask"></div> <div :class="mainClass" :style="mai
关于vue项目中搜索节流的实现代码

我们经常会遇到这种需求,现在我们在使用百度搜索的时候他们的思想也是根据防抖节流而实现的,至于用防抖还是节流根据自己需求. <template> <input type="text" v-model.trim="sse"> </template> <script> const delay = (function () { let timer = 0 return function (callback, ms) { cl

Vue-Cli中自定义过滤器的实现代码

相关推荐

随机推荐