快捷導(dǎo)航

Vue之過(guò)濾器詳解

更新時(shí)間：2021年11月21日 16:07:33 作者：王同學(xué)要努力

這篇文章主要為大家介紹了Vue之過(guò)濾器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助,希望能夠給你帶來(lái)幫助

在這里插入圖片描述

<body>
    <div id="root">
        <h2>顯示格式化后的時(shí)間</h2>
        <!-- 計(jì)算屬性實(shí)現(xiàn) -->
        <h2>現(xiàn)在是{{fmtTime}}</h2>
        <!-- methods實(shí)現(xiàn) -->
        <h2>現(xiàn)在是{{getFmtTime()}}</h2>
        <!-- 過(guò)濾器時(shí)間實(shí)現(xiàn)-->
        <h2>現(xiàn)在是{{time | timeFormater}}</h2>
    </div>
    <div id="root2">
        <h2>現(xiàn)在是：{{msg |mySlice }}</h2>
    </div>
    <script>
        Vue.config.productionTip = false;
        //全局過(guò)濾器
        Vue.filter('mySlice', function(value) {
            return value.slice(0, 4)
        })
        new Vue({
            el: "#root",
            data: {
                time: 1637047951556 //時(shí)間戳
            },
            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) {
                    return dayjs(value).format('YYYY年MM月DD HH: mm: ss ')
                }
            },
        })

        new Vue({
            el: "#root2",
            data: {
                msg: 'hello world'
            }
        })
    </script>
</body>

在這里插入圖片描述

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

您可能感興趣的文章:

相關(guān)文章

vue 實(shí)現(xiàn)類(lèi)似淘寶星級(jí)評(píng)分的示例
下面小編就為大家分享一篇vue 實(shí)現(xiàn)類(lèi)似淘寶星級(jí)評(píng)分的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue3?process.env.XXX環(huán)境變量不生效的解決方法
這篇文章主要給大家介紹了關(guān)于vue3?process.env.XXX環(huán)境變量不生效的解決方法,通過(guò)文中介紹的方法可以很方便的解決遇到的問(wèn)題,對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-08-08
vue實(shí)現(xiàn)輪播圖幀率播放
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)輪播圖幀率播放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
Vue父組件向子組件傳值以及data和props的區(qū)別詳解
這篇文章主要介紹了Vue父組件向子組件傳值以及data和props的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
vue下載文件以及文件重命名方式
這篇文章主要介紹了vue下載文件以及文件重命名方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
在vant 中使用cell組件定義圖標(biāo)該圖片和位置操作
這篇文章主要介紹了在vant 中使用cell組件定義圖標(biāo)該圖片和位置操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
關(guān)于element?ui的菜單default-active默認(rèn)選中的問(wèn)題
這篇文章主要介紹了關(guān)于element?ui的菜單default-active默認(rèn)選中的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue@cli3項(xiàng)目模板怎么使用public目錄下的靜態(tài)文件
這篇文章主要介紹了vue@cli3項(xiàng)目模板怎么使用public目錄下的靜態(tài)文件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
elementUI?el-table二次封裝的詳細(xì)實(shí)例
在項(xiàng)目中會(huì)多次使用表格展示數(shù)據(jù),不對(duì)這個(gè)table進(jìn)行二次封裝成我們自己想要的,重復(fù)的代碼量的工作會(huì)比較大,下面這篇文章主要給大家介紹了關(guān)于elementUI?el-table二次封裝的相關(guān)資料,需要的朋友可以參考下
2023-03-03
vue引入cesium問(wèn)題
這篇文章主要介紹了vue引入cesium問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10