Vue过滤器
Vue 过滤器
2023-06-13 09:12:14 时间
过滤器
过滤器主要用在插值表达式({{ }})或v-bind中,在数据即将渲染时进行一些操作,如时间格式化。
全局过滤器
全局过滤器作用与所有VM对象 定义格式
Vue.filter(name,function(data,arg[]){
...
})
name:string
:过滤器名称 data
:过滤器管道符前面的数据 arg[]
:可选自定义其他参数
使用方法 {{ data | 过滤器 }}
示例--全局过滤器时间格式化
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<P>过滤前:{{ date }}</P>
<p>过滤后:{{ date | dateFormdat }}</p>
</div>
<script type="text/javascript" src='./vue.js'></script>
<script type="text/javascript">
//定义全局过滤器
Vue.filter('dateFormdat',function(data){
var newDate = new Date(data)
var yy = newDate.getFullYear()
var mm = newDate.getMonth()+1
var dd = newDate.getDate()
return `${yy}-${mm}-${dd}`
})
var vm = new Vue({
el:"#app",
data:{
date:new Date()
}
})
</script>
</body>
</html>
实现效果
带参数的过滤器
过滤器也可以传入参数 如下示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<P>过滤前:{{ date }}</P>
<p>传参前:{{date | dateFormdat}}</p>
<p>传参后:{{ date | dateFormdat("yyyy-mm-dd h:i:s") }}</p>
</div>
<script type="text/javascript" src='./vue.js'></script>
<script type="text/javascript">
//定义全局过滤器
Vue.filter('dateFormdat',function(data,arg){
var newDate = new Date(data)
var yy = newDate.getFullYear()
var mm = (newDate.getMonth()+1).toString().padStart(2,0)
var dd = newDate.getDate().toString().padStart(2,0)
if(arg && arg==="yyyy-mm-dd h:i:s"){
var h = newDate.getHours();
var m = newDate.getMinutes()
var s = newDate.getSeconds()
return `${yy}-${mm}-${dd} ${h}:${m}:${s}`
}
return `${yy}-${mm}-${dd}`
})
var vm = new Vue({
el:"#app",
data:{
date:new Date()
}
})
</script>
</body>
</html>
私有过滤器
私有过滤器作用与当前VM对象 定义格式
filters:{
(过滤器名称)
dateFomdat:function(){
//
}
}
示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<P>过滤前:{{ date }}</P>
<p>传参前:{{date | dateFormdat}}</p>
<p>传参后:{{ date | dateFormdat("yyyy-mm-dd h:i:s") }}</p>
</div>
<div id="app2">
<p>传参后:{{ date | dateFormdat("yyyy-mm-dd h:i:s") }}</p>
</div>
<script type="text/javascript" src='./vue.js'></script>
<script type="text/javascript">
//定义全局过滤器
Vue.filter('dateFormdat',function(data,arg){
var newDate = new Date(data)
var yy = newDate.getFullYear()
var mm = (newDate.getMonth()+1).toString().padStart(2,0)
var dd = newDate.getDate().toString().padStart(2,0)
if(arg && arg==="yyyy-mm-dd h:i:s"){
var h = newDate.getHours();
var m = newDate.getMinutes()
var s = newDate.getSeconds()
return `${yy}-${mm}-${dd} ${h}:${m}:${s}`
}
return `${yy}-${mm}-${dd}`
})
var vm = new Vue({
el:"#app",
data:{
date:new Date()
}
})
var vm2 = new Vue({
el:"#app2",
data:{
date:new Date()
},
filters:{
dateFormdat:function(data){
var newDate = new Date(data)
var yy = newDate.getFullYear()
var mm = (newDate.getMonth()+1).toString().padStart(2,0)
var dd = newDate.getDate().toString().padStart(2,0)
return `私有过滤器${yy}-${mm}-${dd}`
}
}
})
</script>
</body>
</html>
相关文章
- vue 加载页面时触发时间_Vue 刷新页面时会触发事件吗「建议收藏」
- vue 的双向绑定原理「建议收藏」
- 人类高质量vue学习笔记(五)
- SpringBoot + Vue 开发前后端分离的旅游管理系统
- 解决:VUE同一路由强制刷新页面
- vue源码分析-从new Vue开始
- 关于vue-admin-work开源版重大调整
- 抱歉,久等了,基于Antd-Vue的VueAdminWorkA框架正式和大家开源见面了
- 「后端小伙伴来学前端了」关于 Vue中 Slot 插槽的使用,实用且也是组件中必会的一个知识,另外也可以实现父子组件之间通信
- vuex刷新后数据消失_如何解决vue修改数据不刷新页面
- Vue富文本_ueditor编辑器
- Vue生成二维码_vue通过二维码分享
- Vue项目:菜农管理 【maven + spring boot + RESTFul + SSM+vue + axios】
- 如何使用netlify部署vue应用程序
- Vue指令之条件渲染
- vue.js入门篇之Vue.js 样式绑定
- 开心档之Vue教程2
- 安装Vue on Linux:轻松搭建开发环境(linux安装vue)
- Vue框架下的Redis调用实战(vue调用redis)
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- Vue如何连接Redis(vue怎么连接Redis)
- Vue操作Redis掌握前端数据管理利器(vue操作redis)
- Vue搭配Redis做针对性取值(vue redis取值)
- Oracle Vue网站助力网站创新,让你的网站飞起来(oracle vue网站)
- 研究Oracle VUE价格探究深入探究和分析(oracle vue价格)
- 淘系前端架构周刊:Next.js 11.1 发布、Vue.js 3.2 发布