Vue-過濾器

過濾器

時間戳格式化

實現方式

計算屬性
方法
過濾器

基礎依賴

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>

效果

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/85186.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/85186.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/85186.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！