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

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

开发者学堂课程【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】软件包的分类
385 0
|
4天前
|
云安全 人工智能 自然语言处理
|
8天前
|
人工智能 Java API
Java 正式进入 Agentic AI 时代:Spring AI Alibaba 1.1 发布背后的技术演进
Spring AI Alibaba 1.1 正式发布,提供极简方式构建企业级AI智能体。基于ReactAgent核心,支持多智能体协作、上下文工程与生产级管控,助力开发者快速打造可靠、可扩展的智能应用。
822 23
|
3天前
|
机器学习/深度学习 人工智能 自然语言处理
Z-Image:冲击体验上限的下一代图像生成模型
通义实验室推出全新文生图模型Z-Image,以6B参数实现“快、稳、轻、准”突破。Turbo版本仅需8步亚秒级生成,支持16GB显存设备,中英双语理解与文字渲染尤为出色,真实感和美学表现媲美国际顶尖模型,被誉为“最值得关注的开源生图模型之一”。
388 3
|
12天前
|
数据采集 人工智能 自然语言处理
Meta SAM3开源:让图像分割,听懂你的话
Meta发布并开源SAM 3,首个支持文本或视觉提示的统一图像视频分割模型,可精准分割“红色条纹伞”等开放词汇概念,覆盖400万独特概念,性能达人类水平75%–80%,推动视觉分割新突破。
811 59
Meta SAM3开源:让图像分割,听懂你的话
|
1天前
|
弹性计算 网络协议 Linux
阿里云ECS云服务器详细新手购买流程步骤(图文详解)
新手怎么购买阿里云服务器ECS?今天出一期阿里云服务器ECS自定义购买流程:图文全解析,阿里云服务器ECS购买流程图解,自定义购买ECS的设置选项是最复杂的,以自定义购买云服务器ECS为例,包括付费类型、地域、网络及可用区、实例、镜像、系统盘、数据盘、公网IP、安全组及登录凭证详细设置教程:
164 114
|
5天前
|
机器学习/深度学习 人工智能 数据可视化
1秒生图!6B参数如何“以小博大”生成超真实图像?
Z-Image是6B参数开源图像生成模型,仅需16GB显存即可生成媲美百亿级模型的超真实图像,支持中英双语文本渲染与智能编辑,登顶Hugging Face趋势榜,首日下载破50万。
343 19