Vue中过滤器(filter)的功能高度提取,便于使用,前端小伙伴们使用的频率很高.但大多数都是在模板区域来使用。

  • 如果要在脚本区域, 也就是来使用已经定义好过滤器功能,该如何去做呢?
  • 难道需要在utils/下写一个filter.js的文件来同步过滤器的功能吗?这样的话重复代码有点多啊。
  • 以下就是如何在区域使用过滤器的脚本。
  • 此处省略去定义filter和在main.js中的引用

// 在 methods , 生命周期函数中 mounted / created 中使用 // filterName: 过滤器名称 params: 待处理的参数 this.$root.$options.filters.filterName(params) // demo: 返回不带秒的日期格式 let temp = this.$root.$options.filters.dateSimple('2019-03-20 23:12:12') // temp: 2019-03-20 23:12

当然为了使用方便也可以先提取filters,然后再使用具体的filter

let filters = this.$root.$options.filters
let temp = filters.dateSimple(params)

Vue <script></script>区域使用filter过滤器的更多相关文章

  1. 学习vue第七节,filter过滤器如何的使用

    vue 过滤器如何的使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. Vue的filter过滤器

    一和二,请参考https://www.cnblogs.com/zui-ai-java/p/11109213.html 三.index.html <!DOCTYPE html> <ht ...

  3. vue 中全局filter过滤器的配置及使用

    在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...

  4. 彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题

    彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题 2018年12月08日 21:58:26 Kevin395 阅读数 1753   背景不多介绍了,直接上代码. ...

  5. vue.js基础知识篇(4):过滤器、class与style的绑定2

    代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...

  6. filter 过滤器的基本使用

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  7. vue(基础二)_组件,过滤器,具名插槽

    一.前言 主要包括:  1.组件(全局组件和局部组件)                     2.父组件和子组件之间的通信(单层)                     3.插槽和具名插槽     ...

  8. vue2 filter过滤器的使用

    本章主要讲vue2的过滤器的使用 1.先介绍下vue1与vue2的filter区别,也就是vue2更新的地方 a: 2.0将1.0所有自带的过滤器都删除了,也就是说,在2.0中,要使用过滤器,则需要我 ...

  9. 转载 angularJS filter 过滤器

    angularjs中的filter(过滤器) 标签: angularjsfilter   源文地址:http://www.ncloud.hk/技术分享/angularjs中的filter-过滤器/ f ...

随机推荐

  1. 数据结构C语言实现----出栈操作

    代码如下: #include<stdio.h> #include<stdlib.h> typedef struct { char *base; char *top; int s ...

  2. Ethical Hacking - GAINING ACCESS(17)

    CLIENT SIDE ATTACKS - Backdooring exe' s Download an executable file first. VEIL - FRAMEWORK A backd ...

  3. window下远程连接redis服务

    首先下redis包: 下载地址:https://github.com/MSOpenTech/redis/releases. 之后: 1.注释掉redis.windows-service.conf 中的 ...

  4. idea 自动生成try/catch代码块的快捷键

    好像每个人的快捷键可能不同:我的是  Alt+Shift+Z 网上查的是  Ctrl+Alt+T 如果都不是可以点选工具栏生成try/catch(并可查看到自己的快捷键是什么):Code->Su ...

  5. css选择器大全

    1.元素选择器 这是最基本的CSS选择器,HTML文档中的元素本身就是一个选择器: p {line-height:1.5em; margin-bottom:1em;} //设置p元素行高1.5em,距 ...

  6. 橘子origin游戏平台如何绑定登陆验证/二次验证码?

    任天堂游戏公司4月份16万用户数据被黑客盗取,官方呼吁用户绑定二次验证码.疫情期间游戏用户暴涨,黑客活动频率也在增长,想起R星俱乐部用户绑定两步验证给十金的长期活动实在是明智之举,下面说下橘子游戏平台 ...

  7. 干货分享丨玩转物联网IoTDA服务系列五-智能家居煤气检测联动

    摘要:该场景主要描述的是设备可以通过LWM2M协议与物联网平台进行交互,用户可以在控制台或通过应用侧接口创建设备联动规则,把设备上报的属性转发,通过物联网平台规则引擎转变成命令下发给其他指定设备. 场 ...

  8. vue怎么自定义组件

    我们在搭建好的手脚架中 进行使用 一.在src =>components => 创建XXbtn文件夹用来存放你的组件 =>在创建一个vue的文件 . 二.在src => com ...

  9. Repeating Decimals UVA - 202---求循环部分

    原题链接:https://vjudge.net/problem/UVA-202 题意:求一个数除以一个数商,如果有重复的数字(循环小数),输出,如果没有,输出前50位. 题解:这个题一开始考虑的是一个 ...

  10. 基于.Net Core的Redis实现查询附近的地理信息

    1.使用的Redis客户端为:ServiceStack.Redis 2.Redis 中的 GEORedis是我们最为熟悉的K-V数据库,它常被拿来作为高性能的缓存数据库来使用,大部分项目都会用到它.从 ...