当前位置：首页 > news >正文

Vue-过滤器

news 来源：原创 2025/6/2 10:49:52

过滤器

时间戳格式化

实现方式

计算属性
方法
过滤器

基础依赖

day.min.js 下载链接
放到相对路径 js 目录下

Computed

代码

<!DOCTYPE html>
<html lang="en"><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><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>过滤器-格式化时间</h1><div><h2>当前时间戳：{{curTime}}</h2><!-- 计算属性 --><h3>计算属性：{{fmtTime}}</h3></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",// curTime: new Date().getTime(),curTime: 1748675500506,},computed: {fmtTime(){console.log(" computed format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},methods: {},});</script>
</html>

效果

在这里插入图片描述

Methods

<!DOCTYPE html>
<html lang="en"><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><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>过滤器-格式化时间</h1><div><h2>当前时间戳：{{curTime}}</h2><!-- 计算属性 --><h3>计算属性：{{fmtTime}}</h3><!-- Methods方法 --><h3>Methods方法：{{formatTime()}}</h3></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",// curTime: new Date().getTime(),curTime: 1748675500506,},computed: {fmtTime(){console.log(" computed format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},methods: {formatTime(){console.log(" methods format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},});</script>
</html>

效果

在这里插入图片描述

Filters

无参过滤器

代码

<!DOCTYPE html>
<html lang="en"><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><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>过滤器-格式化时间</h1><div><h2>当前时间戳：{{curTime}}</h2><!-- 计算属性 --><h3>计算属性：{{fmtTime}}</h3><!-- Methods方法 --><h3>Methods方法：{{formatTime()}}</h3><!-- 过滤器 --><h3>无参过滤器：{{curTime | timeFormater}}</h3></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",// curTime: new Date().getTime(),curTime: 1748675500506,},computed: {fmtTime(){console.log(" computed format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},methods: {formatTime(){console.log(" methods format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},filters: {timeFormater(value){console.log(" No args filters format time ...")return dayjs(value).format('YYYY-MM-DD HH:mm:ss')}}});</script>
</html>

效果

在这里插入图片描述

有参过滤器

代码

<!DOCTYPE html>
<html lang="en"><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><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>过滤器-格式化时间</h1><div><h2>当前时间戳：{{curTime}}</h2><!-- 计算属性 --><h3>计算属性：{{fmtTime}}</h3><!-- Methods方法 --><h3>Methods方法：{{formatTime()}}</h3><!-- 过滤器 --><h3>无参过滤器：{{curTime | timeFormater}}</h3><h3>有参过滤器：{{curTime | timeFormater('YYYY年MM月DD日 HH时mm分ss秒')}}</h3></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",// curTime: new Date().getTime(),curTime: 1748675500506,},computed: {fmtTime(){console.log(" computed format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},methods: {formatTime(){console.log(" methods format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},filters: {timeFormater(value,formatStr='YYYY-MM-DD HH:mm:ss'){console.log(" filters format time ... :" + formatStr)return dayjs(value).format(formatStr)}}});</script>
</html>

效果

在这里插入图片描述

链式过滤器

代码

<!DOCTYPE html>
<html lang="en"><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><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>过滤器-格式化时间</h1><div><h2>当前时间戳：{{curTime}}</h2><!-- 计算属性 --><h3>计算属性：{{fmtTime}}</h3><!-- Methods方法 --><h3>Methods方法：{{formatTime()}}</h3><!-- 过滤器 --><h3>无参过滤器：{{curTime | timeFormater}}</h3><h3>有参过滤器：{{curTime | timeFormater('YYYY年MM月DD日 HH时mm分ss秒')}}</h3><h3>链式过滤器：{{curTime | timeFormater('YYYY年MM月DD日 HH时mm分ss秒') | spliceStr}}</h3></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",// curTime: new Date().getTime(),curTime: 1748675500506,},computed: {fmtTime(){console.log(" computed format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},methods: {formatTime(){console.log(" methods format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},filters: {timeFormater(value,formatStr='YYYY-MM-DD HH:mm:ss'){console.log(" filters format time ... :" + formatStr)return dayjs(value).format(formatStr)},spliceStr(value){console.log(" filters splice time (年月日)... ")return value.split(" ")[0]}}});</script>
</html>

效果

全局过滤器

格式： Vue.filter(‘filterName’,function(value){})
注意：全局过滤器声明必须在Vue实例化之前

代码

<!DOCTYPE html>
<html lang="en"><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><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>过滤器-格式化时间</h1><div><h2>当前时间戳：{{curTime}}</h2><!-- 计算属性 --><h3>计算属性：{{fmtTime}}</h3><!-- Methods方法 --><h3>Methods方法：{{formatTime()}}</h3><!-- 过滤器 --><h3>无参过滤器：{{curTime | timeFormater}}</h3><h3>有参过滤器：{{curTime | timeFormater('YYYY年MM月DD日 HH时mm分ss秒')}}</h3><h3>链式过滤器：{{curTime | timeFormater('YYYY年MM月DD日 HH时mm分ss秒') |spliceStr}}</h3><h3>全局过滤器：{{curTime | timeFormater | globalStr}}</h3></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",// curTime: new Date().getTime(),curTime: 1748675500506,},computed: {fmtTime() {console.log(" computed format time ...");return dayjs(this.curTime).format("YYYY-MM-DD HH:mm:ss");},},methods: {formatTime() {console.log(" methods format time ...");return dayjs(this.curTime).format("YYYY-MM-DD HH:mm:ss");},},filters: {timeFormater(value, formatStr = "YYYY-MM-DD HH:mm:ss") {console.log(" filters format time ... :" + formatStr);return dayjs(value).format(formatStr);},spliceStr(value) {console.log(" filters splice time (年月日)... ");return value.split(" ")[0];},},});</script>
</html>