學習vue-filter

過濾器

用于文本格式化，數組數據的過濾和排序

全局過濾器

Vue.filter('',function(){})

局部過濾器

new Vue({
    el:"#app",
    filters:{
        uppcase(){
            
        }
    }
})

使用地方

管道符號添加到表達式后面

插值表達式
v-bind表達式

過濾器的參數 (管道傳入)

<body>
    <div id="app">
        <!-- 在這里使用管道符號傳入第一個參數進入format -->
        <p>{{filename | format('vue',suffix)}}</p>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        // value由管道傳入
        Vue.filter('format', function(value, prefix, suffix) {
            if (!value) return '';
            value = value.toString();
            return prefix + '-' + value + '.' + suffix;
        });
        const app = new Vue({
            el: "#app",
            data: {
                filename: "filters",
                suffix: "js"
            }
        });
    </script>
</body>

過濾器串聯：利用管道進行參數的傳遞

```js

``` ### 總結 - Vue中的過濾器其實就是一個 “函數” , 可以根據管道符號 “|” 傳入第一個值。 - 插值表達式；v-bind表達式；過濾器一定要返回值 - 借助管道可以實現串聯

posted @ 2021-05-16 17:05 HelloCoderRookie 閱讀(43) 評論(0) 收藏舉報

刷新頁面返回頂部

HelloCoderRookie

學習vue-filter

過濾器

全局過濾器

局部過濾器

使用地方

過濾器的參數 (管道傳入)

過濾器串聯：利用管道進行參數的傳遞

公告