Vue过滤器vue中过滤方式vue中过滤方式vue中过滤方式vue中过滤方式vue中过滤方式vue中过滤方式vue中过滤

内置方法过滤

<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过滤

<body>
    <!-- 第一次参数是值，第二个参数是过滤方法，还可以继续第三第四个过滤表示第一次过滤的结果依次往后过滤 相比函数可省去多层嵌套 -->
    <!-- 只能用于v-bind和{{}}中使用 -->
    <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>