GuLi商城-前端基础Vue-过滤器

港控/mmm° 2024-03-24 18:29 22阅读 0赞

![9431e16259e247e181bb52ae443cd1d1.png][]

![1c744504817f462ba3fc41e82fdbab58.png][]![a2b320067e344b1aaff32459d1433630.png][]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        
        <div id="app">
            <ul>
                <li v-for="user in userList">
                    {
       {user.id}} ==> {
       {user.name}} ==> {
       {user.gender == 1?"男":"女"}} ==>
                    {
       {user.gender | genderFilter}} ==> {
       {user.gender | gFilter}}
                </li>
            </ul>
        </div>
        <script src="../node_modules/vue/dist/vue.js"></script>
    
        <script>
    
            Vue.filter("gFilter", function (val) {
                if (val == 1) {
                    return "男~~~";
                } else {
                    return "女~~~";
                }
            })
    
            let vm = new Vue({
                el: "#app",
                data: {
                    userList: [
                        { id: 1, name: 'jacky', gender: 1 },
                        { id: 2, name: 'peter', gender: 0 }
                    ]
                },
                filters: {
                     filters 定义局部过滤器，只可以在当前vue实例中使用
                    genderFilter(val) {
                        if (val == 1) {
                            return "男";
                        } else {
                            return "女";
                        }
                    }
                }
            })
        </script>
    </body>
    
    </html>

![fc6aa8d5203f4bfaaf73982cdeddc8e9.png][]

[9431e16259e247e181bb52ae443cd1d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/870a7ec422c34f9997c5bd915e5492cb.png
[1c744504817f462ba3fc41e82fdbab58.png]: https://img-blog.csdnimg.cn/1c744504817f462ba3fc41e82fdbab58.png
[a2b320067e344b1aaff32459d1433630.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/36749c72b8e4491e93ab7c18a683bdf2.png
[fc6aa8d5203f4bfaaf73982cdeddc8e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/4e99e34aa2ec4e01bc21d4257ae02b8c.png