第六十五篇:Vue的过滤器
阅读原文时间:2023年07月08日阅读:1

好家伙,

1.过滤器

//在双花括号中通过"管道符"调用 capitalize 过滤器,对 message的值进行格式化

{{ message | capi }}

//在v—bind 中通过“管道符”调用 formatid 过滤器,对rawld 的值进行格式化

<div id="app">  
   <p>message的值是:{{ message | capi }}</p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<script>

    const vm = new Vue({

        el:'#app',

        data:{

            message:'you are so fucking handsome',  
        },  
        methods:{

         },  
        filters:{  
            //在filters下定义capi  
            capi(val){

                //字符串有charAt方法,这个方法接收索引值,表示从字符串中把索引对应的字符获取出来  
                // val.charAt(0)  
                // toUpperCase() 方法用于把字符串转换为大写  
                const first = val.charAt(0).toUpperCase()  
                // 字符串的slice方法,可以截取字符串,从指定索引往后截取  
                const other =val.slice(1)  
                // 过滤器中,一定要有一个返回值  
                return first + other  
            }

        }

    })

</script>  

2.过滤器的作用域

// 全局过滤器 — 独立于每个 vm 实例之外

// Vue.filter()方法接收两个参数:

Vue.filter('capitalize', (str) => {

// 第1个参数,是全局过滤器的"名字”  

   // 第2个参数,是全局过滤器的"处理函数”

return str.charAt(0).toUpperCase()+ str.slice(1) + '~~'  

})

3.用一下

{{ item.time | DateFormat }}