首页 > 其他分享 >Vue2(笔记15) - Vue核心 - 过滤器

Vue2(笔记15) - Vue核心 - 过滤器

时间:2022-12-03 21:31:55浏览次数:69  
标签:Vue 15 dayjs value Vue2 time 过滤器 return

可学可不学,可用可不用


过滤器

需求:把一个时间戳格式化成可读的年月日时间;

需要引入一个 dayjs 的 JS库,专门用来处理时间的;​​dayjs在这可以下载​

<script src="./res/vue.js"></script>
<script src="./res/dayjs.min.js"></script>

提示:首先得引入 vue.js  和 dayjs 库(用来处理时间的JS库,有兴趣可以了解下);

<div id="root">
<h2>显示格式化后的日期</h2>
<h3>时间戳:{{time}}</h3>
<!-- 计算属性实现 -->
<h3>日期:{{fmtTime}}</h3>
<!-- methods 实现 -->
<h3>日期:{{getFmtTime()}}</h3>
<!-- 过滤器实现 -->
<h3>日期:{{time | timeFormater}}</h3>
<!-- 过滤器实现(传参) -->
<h3>日期:{{time | timeFormater('YYYY_MM_DD') }}</h3>
<!-- 过滤器实现(串联) -->
<h3>日期:{{time | timeFormater('YYYY_MM_DD') | timeSlice}}</h3>
<!-- 应用全局过滤器 -->
<h3>欢迎词:{{msg | mySlice}}</h3>
</div>

提示1:计算属性实现 和methods 实现都比较简单,methods 可以在插值语法中加上括号来执行;

提示2:过滤器需要 引入 全新的配置对象 ​filters:{}​​,过滤器方法函数写在里面,在插值语法中使用 “​|​” 管道的方式(有点像 linux 的管道),在后面写上过滤器的名;

提示3:过滤器可以传参,可复用,可串联;

提示4:过滤器,还有局部和全局过滤器之分,用法简单,不难区分;

// 全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,5)
})

new Vue({
el:'#root',
data:{
time:1670069799153,
msg:'hello Vue'
},
computed:{
fmtTime(){
return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
}
},
methods: {
getFmtTime(){
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)
},
timeSlice(value){
return value.slice(0,4)
}
}
})

提示1:先看全局过滤器,定义在 Vue.filter() 方法上,回调函数就是处理过滤的方法,一般在插值语法中使用;

提示2:局部过滤器都写在 ​filters:{}​ 这个配置对象里面,接受传参,可写多个;

看下效果:一个时间戳,用计算属性、methods 和三种过滤器的方式来实现,最后演示了一下全局过滤器;

Vue2(笔记15) - Vue核心 - 过滤器_时间戳


【过滤器】总结:

定义:对要显示的数据进行特定格式化后再显示,(适用于一些简单逻辑的处理)。

语法:

1)注册过滤器: Vue.filter(name,callback) 或 new Vue({filters:{}})

2)使用过滤器:{{ xxx | 过滤器名 }} 或 v-bind:属性 = " xxx | 过滤器名"


备注:

1)过滤器也可以接收额外参数、多个过滤器也可以串联;

2)并没有改变原本的数据,是产生新的对应的数据;


感觉并不像老师说的,可用可不用,有些情况可能还是挺有用的;


标签:Vue,15,dayjs,value,Vue2,time,过滤器,return
From: https://blog.51cto.com/ahuiok/5908670

相关文章

  • jenkins 部署VUE
    一、安装nodejs插  在系统管理-》插件管理中安装nodejs插件 二、配置nodejs插件在jenkins全局工具配置中,配置nodejs,如下图  三、编写三、新建vue构建任......
  • Vue2(笔记14) - Vue核心 - 表单数据收集
    表单数据收集表单数据收集是最常用的逻辑;<divid="root"><[email protected]="demo">账号:<inputtype="text"v-model.trim="userInfo.account"><br><br>......
  • vue中单独封装elementui中的Dialog弹框组件
    一。在components文件中新建弹框组件<template><div><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%"@close="handleClose"><span......
  • Vue3路由
    路由基础(页面跳转)下载vue-router,vue3对应的版本是4cnpminstallvue-router@4启动项目npmrundevrundev的由来组件Home、Blogrouter.jsimport{createRout......
  • vue element ui 使用el-cascader实现城市选择
    安装依赖cnpminstallelement-china-area-data-S说明provinceAndCityData是省市二级联动数据(不带“全部”选项)regionData是省市区三级联动数据(不带“全部”选项)prov......
  • Vue 中 props配置项
    Vue中props配置项1:props配置项说明<!--##props配置项1.功能:让组件接收外部传过来的数据2.传递数据:```<Demoname="xxx"/>```3.接收数据:1.第一种方式(......
  • 郭东白的架构课00015
    你好,我是郭东白。到这里,我们就完成了模块一的学习。那么这节课,我就以一个更宏观的视角来总结一下整个模块的思路,帮助你更好地理解与吸收。过程正义:为什么要定义生存法则?......
  • Vue3
    Vue3setup()和ref()的使用ref()这是vue3声明变量的方式,并且在setup()中return返回出去才可以在页面中使用。vue2声明的变量需要放在data中声明使用。vue2......
  • ant-design-vue
    vue3引入ant-design-vueUI组件安装npmi--saveant-design-vue@next-S在main.js全局引入importAntdfrom'ant-design-vue';import'ant-design-vue/dist/an......
  • vue
    安装安装nodejs环境命令行npminstall-g@vue/cli创建项目vuecreate<project>安装依赖cd<project>npminstall运行项目npmrunserve配置......