Vue学习之--------Vue中过滤器(filters)的使用（代码实现）（2022/7/18）
1、过滤器
1.1 概念
过滤器：
- 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
- 语法：
1、注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
备注：
- 1、过滤器也可以接收额外参数、多个过滤器也可以串联
- 2、并没有改变原本的数据, 是产生新的对应的数据
1.2 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
<div id="App">
<h1>格式化后的时间</h1>
<h2>现在是（计算属性实现）:{{formatTime}}</h2><br />
<h2>现在是（method实现）:{{getformatTime()}}</h2><br />
<h2>现在是（过滤器实现）:{{time | timeFormater}}</h2><br />
<h2>现在是（过滤器实现同时传参）:{{time | timeFormater('YYYY-MM-DD')}}</h2><br />
<h2>现在是（过滤器实现同时传参（多个过滤器的联合使用））:{{time | timeFormater('YYYY-MM-DD') | mySlice}}</h2><br />
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//全局过滤器
Vue.filter('mySlice', function (value) {
return value.slice(0, 4)
})
//创建Vue实例
new Vue({
el: '#App',
data: {
value: "Vue",
time: 1658153149000, //时间戳
},
methods: {
getformatTime() {
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
computed: {
formatTime() {
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
filters: {
timeFormater(value, str = "YYYY年MM月DD日 HH:mm:ss") {
return dayjs(value).format(str)
}
}
})
</script>
</body>
</html>
1.3 测试效果
Vue学习之--------Vue中过滤器(filters)的使用（代码实现）（2022/7/18）的更多相关文章
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)
Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)
五 Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...
- vue中过滤器filters的使用
组件内写法 filters:{ filter:function(data,arg1,arg2){ return .... } } 全局写法 filters('filter',function(data ...
随机推荐
- Java学习 (四)基础篇 Java基础语法
注释&标识符&关键字 注释 注释并不会被执行,其主要目的用于解释当前代码 书写注释是一个非常好的习惯,大厂要求之一 public class hello { public static ...
- 5.27 NOI 模拟
\(T1\)约定 比较水的\(dp\)题 上午想到了用区间\(dp\)求解,复杂度\(O(n^5),\)貌似没开\(long\ long\)就爆掉了 正解还是比较好想的,直接枚举从何时互不影响然后转移 ...
- 毕昇编译器优化：Lazy Code Motion
摘要:本文中,我们将介绍通过代码移动(插入)的方式消除冗余计算的一个典型方法. 本文分享自华为云社区<编译器优化那些事儿(3):Lazy Code Motion>,作者:毕昇小助手. 导语 ...
- 重构、插件化、性能提升 20 倍，Apache DolphinScheduler 2.0 alpha 发布亮点太多！
点击上方 蓝字关注我们 社区的小伙伴们,好消息!经过 100 多位社区贡献者近 10 个月的共同努力,我们很高兴地宣布 Apache DolphinScheduler 2.0 alpha 发布.这是 ...
- Apache DolphinScheduler 1.2.1 发布说明
Apache DolphinScheduler 于2020年2月24日正式发布 1.2.1 版,发布内容如下: 新特性: [#1497] 通过 API 创建的工作流在前端展示时自动调整布局. [#74 ...
- Luogu3177 [HAOI2015]树上染色 （树形DP）
考场上打出来个\(2^n n^2 \log (n)\),还文件错误RE了... 其实这不就是个变了一点点的树形背包,状态是节点\(u\)子树的\(贡献\). //#include <iostre ...
- MySQL更新锁表超时 Lock wait timeout exceeded
背景 最近在做一个订单的钉钉审批功能,钉钉审批通过之后,订单更新审核状态,然后添加一条付款,并且更新付款状态: // 订单审批通过 @Transactional(rollbackFor = Excep ...
- Docker与GU 安装管理配置
Linux 下的 Docker 安装与使用 一.安装与配置 1.安装依赖包 1 sudo yum install -y yum-utils device-mapper-persistent-data ...
- Webstorm设置背景图为Windows桌面背景
桌面背景图会缓存在这个目录中,文件名不确定在改变桌面背景后会不会变. C:\Users\用户名\AppData\Roaming\Microsoft\Windows\Themes\CachedFiles ...
- 痞子衡嵌入式：浅析IAR下调试信息输出机制之半主机(Semihosting)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是IAR下调试信息输出机制之半主机(Semihosting). 在嵌入式世界里,输出打印信息是一种非常常用的辅助调试手段,借助打印信息,我 ...