过滤器-定义私有过滤器|学习笔记

简介: 快速学习过滤器-定义私有过滤器

开发者学堂课程【Vue.js 入门与实战过滤器-定义私有过滤器】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8148


过滤器-定义私有过滤器


目录

一、全局过滤器

二、自定义私有过滤器

 

一、全局过滤器


<div id=”app”>
</div>
<div id=”app2”>
{{1+1}}
</div>
<script>
Vue.filter(‘dateformat’,function(datstr,pattern=””){
})
Var vm = new Vue {{
})

因为第一个 div 被 vm 控制,而第二个 div 没有被控制,所以{{1+1}}原样输出。可以创建一个新的 vm 对象,控制 div 

var vm2 = new vue( {
el:'#app2’,//el 是控制的元素
data:{

这样输出结果就为2

输出 vm2 的时间

var vm2 = new vue( {
el:'#app2’,//el 是控制的元素
data:{
dt: new Date()
},
<div id=”app2”>
<h3>{{dt}}</h3>
</div>

演示结果:

image.png

上面属于 app1 ,下面属于app2,这两个不属于一个vm对象,分别由各自的 vm 对象来控制。

在全局过滤器中所有的 vm 实例都能够共享。

 

二、自定义私有过滤器


给 vm2 自定义一个私有的过滤器

var vm2 = new vue( {
el:'#app2’,//el 是控制的元素
data:{
dt: new Date()
},
methods:{}
filters:{// methods和filters都是对象,定义私有过滤器,过滤器有两个条件 【过滤器名称和处理函数】。
Dateformat:function(dateStr,pattern=’’) {
var dt = new Date(datestr)
//每个名称都要对应处理的函数,第一个参数是过滤器传过来的数据,
//yyyy-mm-dd
var y=dt.getrullYear()
var m=dt.getMonth()+1
var d = dt.getDate()
If (pattern.tolower case() ===" yyyy-mm-dd') {
Return ‘$(y)-$(m)-$(d)
} else {
var hh =dt.getHours()
var mm =dt.getMinutes()
var ss = dt.getSeconds()
return“${y}-${m}-${d}  $(hh):$(mm):$(ss) 
}
}
}
} )

调用过滤器时,采用的是就近原则,如果私有过滤器和全局过滤器名称一致,则优先调用私有过滤器。

相关文章
|
算法 Java Linux
【Linux】软件包的分类
【Linux】软件包的分类
341 0
|
3天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
14天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1305 5
|
13天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1333 87
|
2天前
|
弹性计算 安全 数据安全/隐私保护
2025年阿里云域名备案流程(新手图文详细流程)
本文图文详解阿里云账号注册、服务器租赁、域名购买及备案全流程,涵盖企业实名认证、信息模板创建、域名备案提交与管局审核等关键步骤,助您快速完成网站上线前的准备工作。
184 82
2025年阿里云域名备案流程(新手图文详细流程)