VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >

  • 第六十五篇：Vue的过滤器

好家伙，

 

过滤器，vue3取消了，只有vue2能用

 

1.过滤器

过滤器（Filters）是vue为开发者提供的功能，常用于文本的格式化。

过滤器可以用在两个地方：插值表达式和v—bind属性绑定。

过滤器应该被添加在JavaScript表达式的尾部，由“管道符”进行调用，("|"我愿称其为竖杠)

示例代码如下：

复制代码
//在双花括号中通过＂管道符＂调用 capitalize 过滤器，对 message的值进行格式化

 <p>{{ message | capi }}</p>

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

 <div v-bind:id="rawld | capi"></div>
复制代码

管道符左边是常规数据,将其作为参数传给右边的过滤器函数,再将处理完的值返回.

所以他真的是个顾名思义的"过滤器"

 

试用一下:

复制代码
<body>
    
    <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>
</body>
复制代码

 

网页如下:

 

 

2.过滤器的作用域

在filters 节点下定义的过滤器，称为“私有过滤器”，

因为它只能在当前 vm 实例所控制的el区域内使用

如果希望在多个vue 实例之间共享过滤器，

则可以按照如下的格式定义全局过滤器：

( 在<script>下定义,与const vm= new vue({})平级 )

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

// Vue．filter（）方法接收两个参数：


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

    // 第1个参数，是全局过滤器的＂名字”
　　 // 第2个参数，是全局过滤器的＂处理函数”

    return str.charAt(0).toUpperCase()+ str.slice(1) + '~~'
})
复制代码

补充,如果全局过滤器和私有过滤器名字冲突,优先使用私有过滤器,就近原则

 

3.用一下

试着用过滤器改善一下前面的时间显示

这里我们用到day.js插件

为"时间显示"这一项添加过滤器

<td>{{ item.time | DateFormat }}</td>

添加配置

复制代码
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
    <script>
        Vue.filter('DateFormat',function(time){

            const dtStr = dayjs(time).format('YYYY-MM-DD HH:mm:ss')
            return dtStr

        })
复制代码

 

更改前:

 

 

更改后:

 

 

 

4.补充调用多个过滤器

<p>{{ message | xxx | yyy | zzz }}</p>

可以使用管道符连续调用多个过滤器

 

 

That's all ! !

 

出处：https://www.cnblogs.com/FatTiger4399/p/16123769.html

相关教程