好家伙，

过滤器，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 ! !

巴特西

第六十五篇：Vue的过滤器

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

1.过滤器

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

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

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

示例代码如下：

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

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

试用一下:

网页如下:

2.过滤器的作用域

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

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

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

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

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

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

3.用一下

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

这里我们用到day.js插件

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

添加配置

更改前:

更改后:

4.补充调用多个过滤器

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

最新文章

热门文章