一个简单的Vue过滤器

什么是过滤器：
是一种数据处理的方式，它并不是一定需要使用的。
如果不用过滤器的话，用 methods 或者 computed 配置项也可以实现。

演示一个简单的过滤器，把时间戳转换到一般格式

先上代码：

<div id="root"><h2>显示格式化后的时间</h2><!-- 1.计算属性实现 --><h2>现在是：{{fmtTime}}</h2><!-- 2.methods实现 --><h2>现在是：{{getfmtTime()}}</h2><!-- 3.过滤器实现(传参) --><h2>现在是：{{Date.now() | getFormater('YYYY-MM') | mySlice}}</h2></div>new Vue({el:'#root',data:{time:1663122222319},methods: {getfmtTime(){return dayjs().format('YYYY-MM-DD HH:mm:ss')}},computed: {fmtTime(){return dayjs().format('YYYY年MM月DD日 HH时mm分ss秒')}},filters: {getFormater(val,str='YYYY年MM月DD日 HH时mm分ss秒'){return dayjs(val).format(str)},mySlice(value){return value.slice(0,4)}}})

配置过滤器：
在vue实例身上，写成对象的形式，如上图，filters，可以配置多个过滤器，其执行内容使用 return 返回

可以传参数，parem1是time，parem2是str；
这里，如果没有传参，它内部有个默认格式，如果传参了，则按照参数格式

这里直接使用第三方的库，
地址：

<a href="https://www.bootcdn.cn/">地址</a>

直接搜索 dayjs

这个库用于专门处理有关日期的数据，
点进去复制第一个地址去下载即可

在页面头部引入该js文件

实现效果：

{{Date.now() | getFormater('YYYY-MM') | mySlice}}

这个 | 默认会吧左边的东西作为一个参数传给 | 后面的内容，
| 后面这个处理过滤器可以传参也可以不传参，如果传参，那么它身上自带的参数是作为第二个参数执行的
也就是说：
第一步

getFormater(val,str='YYYY年MM月DD日 HH时mm分ss秒'){return dayjs(val).format(str)
}

new Date（） => val
‘YYYY-MM’ => str

这里的 format 方法，可以把 val 按照 str 的日期格式转换

return 之后

{{2022-09 | mySlice}}

之后，这个2022-09 会当成参数传给 mySlice

mySlice(value){return value.slice(0,4)
}

2022-09 => value

所以到最后，插值语法中的内容为 {{2022}}

注意：这里使用的两个过滤器均为局部过滤器

当然，过滤器也可以定义成全局

// 把过滤器做成全局的vue.filters('mySlice',function(val){return val.slice(0,4)})

仅是一个简单小案例，自己想要的操作，可以自己定义更好的过滤器。

一个简单的Vue过滤器相关推荐

搭建Vue.js环境，建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
搭建vue项目环境以及创建一个简单的vue的demo
一.vue-cli脚手架的搭建步骤 1.首先,确定你的电脑上已经安装了nodejs,可以使用npm包管理器安装环境,如果还没有安装node环境,则需要安装node.js 这个很简单默认点击安装 ...
用js模拟一个简单敏感词过滤器
1.用js模拟一个简单敏感词过滤器 (用户输入的内容中的敏感词替换为*) 例:"今天有个傻子在旁边大喊大叫,影响了我的操作.", 过滤后:"今天有个在旁边大喊大叫,影响了 ...
深入了解Vue 2响应式原理，并手写一个简单的Vue
1. Vue 2的响应式原理 Vue.js 一个核心思想是数据驱动.所谓数据驱动是指视图是由数据驱动生成的,对视图的修改,不会直接操作 DOM,而是通过修改数据.vue.js里面只需要改变数据,Vue ...
vue 图片剪辑_一个简单的Vue图片剪辑插件
vue 图片剪辑 Vue-Crpopper (vue-crpopper) A simple picture clipping plugin for vue. 一个简单的Vue图片剪辑插件. 安装 (i ...
modal组件 vue_开发一个简单的 Vue 弹窗组件
https://github.com/woai3c/Front-end-articlesgithub.com 一个弹窗组件通常包含两个部分,分别是遮罩层和内容层. 遮罩层是背景层,一般是半透明或不透 ...
一个简单的VUE选择城市组件
首先看下效果: ps: 请忽略上面的水印该组件基于vue + iview搭建而成,可以根据需求自行修改,接下来就是组件的整体的说明了: 一.目录结构这是一个常规的VUE的目录的结构,我们使用的文件 ...
【一个简单的vue公式编辑器组件】
vue 一个简单的公式编辑器组件示例一个基于vue实现数据统计公式的基本功能. 新建一个 formula.vue 组件, 使用 <formula ref="formulaPage& ...
搭建一个简单Django+vue 项目
简介: Django是python的web开发框架,采用了MTV的框架模式,即模型Model,视图View和模版Template. 各自的职责为: 模型(Model),即数据存取层:如何存取.如何验证 ...

一个简单的Vue过滤器

一个简单的Vue过滤器

一个简单的Vue过滤器相关推荐

最新文章

热门文章