vue中过滤器的方法

最新推荐文章于 2024-02-20 00:00:00 发布

Gypsophila 、

最新推荐文章于 2024-02-20 00:00:00 发布

阅读量737

点赞数

文章标签：过滤器 vue

本文链接：https://blog.csdn.net/O_326326/article/details/108921794

版权

1.定义：

过滤就是一个数据经过了这个过滤之后出来另一个东西，可以是从中取得你想要的
或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具
过滤器可以用在两个地方：双花括号插值或v-bind表达式

vue中的过滤器分为两种：局部过滤器和全局过滤器

2.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item of items">
                <span>名称： {{item.name}}</span>
                <span> - </span>
                <span>价格： {{item.price | head | foot('***')}}</span>
            </li>
        </ul>
    </div>

    <script src="js/vue.js"></script>

    <script>

        //vue提供的过滤器
        Vue.filter('head',(price,flag="$")=>{
                    return `${flag}` + (price / 100).toFixed(2);
        });

        Vue.filter('foot',(price_two,flag_two='$')=>{
            return  price_two + `${flag_two}`;
        });

        //对内容(数据),进行二次操作(过滤)
        let app = new Vue({
            el:'#app',
            data:{
              items:[
                {id:1, name:'yo',age:'17',price:"300000"},
                {id:2, name:'xn',age:'22',price:"500000"},
                {id:3, name:'wt',age:'20',price:"600000"}
              ]
            }
        });

    </script>
</body>
</html>

3.注意：

1、当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

2、一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

Gypsophila 、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中过滤器的方法

1.定义：过滤就是一个数据经过了这个过滤之后出来另一个东西，可以是从中取得你想要的或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具过滤器可以用在两个地方：双花括号插值或v-bind表达式vue中的过滤器分为两种：局部过滤器和全局过滤器2.代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conten
复制链接

扫一扫