vue 过滤器

最新推荐文章于 2021-07-30 15:57:41 发布

前端-小鑫

最新推荐文章于 2021-07-30 15:57:41 发布

阅读量160

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43876728/article/details/118970391

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

直接过滤方式

<body>
 <div id="app" v-text=text.toUpperCase()></div>
</body>
<script>
    let dom = new Vue({
        el: '#app',
        data: {
            text: 'abc'
        },
    })
</script>
</html>

函数方法过滤

<body>
     <div id="app" v-text=filter(text)></div> 
    <!-- 或者<div id="app">{{filter(text)}}</div> -->
</body>
<script>
    let dom = new Vue({
        el: '#app',
        data: {
            text: 'abc'
        },
        methods: {
            //方法过滤会在实例上生成，生成的不能与data里面定义的一样 
            filter() { return this.text.toUpperCase() }
        },
    })
</script>
</html>

filters过滤（推荐）

第一次参数是值，第二个参数是过滤方法，还可以继续第三第四个过滤表示第一次过滤的结果依次往后过滤相比函数可省去多层嵌套

适用范围：只能用于v-bind和{{}}中使用

<body>
    <div id="app">{{text|filterA}}</div>
</body>
<script>
    let dom = new Vue({
        el: '#app',
        data: {
            text: 'abc'
        },
        filters: {
            filterA(val) { return val.toUpperCase() }
        }
    })
</script>
</html>