码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-02-07 20:29:59      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:nts   com   spl   reverse   过滤器   基础   filter   color   fun   

一、过滤器

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

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属性来定义,可以定义多个过滤器。

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

 

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

标签:nts   com   spl   reverse   过滤器   基础   filter   color   fun   

原文地址:https://www.cnblogs.com/leokale-zz/p/12274259.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!