vue-09 过滤器filters使用

最新推荐文章于 2025-04-12 16:00:00 发布

原创最新推荐文章于 2025-04-12 16:00:00 发布 · 316 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

12 篇文章

订阅专栏

博客介绍了过滤器的使用，它可用于文本格式化，能在双花括号插值和v-bind表达式中使用。过滤器是对内容或数据进行过滤的方式，有局部和全局之分。重点阐述了局部过滤器，它定义在vue实例中，作用区域也限于此。

1.概述

过滤器使用,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式

定义：对内容或数据进行过滤(二次处理)的一种方式
写法：Vue.filter(“过滤器名称”,过滤方式);
使用：过滤器类似于管道流
种类：局部过滤器和全局过滤器

1.1局部过滤器

局部过滤器与全局的过滤器定义和使用方法一样。唯一的区别在于局部过滤器是定义在vue的实例中。其作用的区域也是vue实例对象内，超出即不可用

script=>filters

    export default {
        name: "nav-header",//name值，每一个组件都需要一个name值，最终加载组件的时候会用到
        data() {
            return {
                poneList: [],
                username: ''
            }
        },
        filters:{
            currency(val){
                if(!val)return '0.00';
                return  '￥' +val.toFixed(2)+'元';
            }
        },
        mounted() {
            this.getProductList();
        },
        methods: {
            getProductList() {
                this.axios.get('/products', {
                    params: {
                        categoryId: '100012',
                        pageSize: 6,
                    }
                }).then((res) => {
                    this.poneList = res.list;
                })
            },
            login(){
                this.$router.push('/login');
            }
            ,
            goToCart(){
                //跳转
                this.$router.push('/cart');
            }

        }
    }

使用案例 <div class="pro-price">{{item.price | currency}}

<ul>
                                <li class="product" v-for="(item,index) in poneList" :key="index">
                                    <a v-bind:href="'/#/product/'+item.id" target="_blank">
                                        <div class="pro-img">
                                            <img :src="item.mainImage"
                                                 :alt="item.subtitle">
                                        </div>
                                        <div class="pro-name">{{item.name}}</div>
                                        <div class="pro-price">{{item.price | currency}}</div>
                                    </a>
                                </li>
                            </ul>