[前端] VUE基础 (5) (过滤器)

一、过滤器

过滤器分为局部过滤器和全局过滤器。

1.局部过滤器

<body>
<div id="app">
</div>
<script src="./static/vue.js"></script>
<script>
    // 定义App
    let App = {
        data() {
            return {
                msg: 'Hello World'
            }
        },
        // 使用msg的时候,使用管道符号传递给filter进行处理
        template: `
                <div>
                    <h2>{{ msg | myReverse }}</h2>
                </div>
            `,
        filters: {
            myReverse: function (val) {
                return val.split("").reverse().join("");
            }
        }
    }
    var vm = new Vue({
        el: "#app",
        data() {
            return {}
        },
        components: {
            App
        },
        template: `
            <div>
                <App></App>
            </div>
        `
    })
</script>
</body>

可以看到,过滤器使用filters属性来定义,可以定义多个过滤器。

在使用的时候,使用管道符号"|"将数据传递给过滤器进行处理。实质上就是一个处理函数。

猜你喜欢

转载自www.cnblogs.com/leokale-zz/p/12274259.html
今日推荐