如何在Vue中定义和调用过滤器？

传智教育

于 2023-09-08 13:40:18 发布

阅读量455

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/cz_00001/article/details/132758454

版权

过滤器(Filters)是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用，示例代码如下：

<l--在双花括号中通过“管道符“调用capitalize过滤器，对message的值进行格式化-->
<p>{
   {
    message | capitalize }}</p>

<！--在v-bind 中通过“管道符”调用 formatId过滤器，对rawId的值进行格式化-->
<div v-bind:id="rawId| formatId"></div>

在创建 vue 实例期间，可以在 filters 节点中定义过滤器，示例代码如下：

const vm = new Vue({
   
    el: '#app'，
    data: {
   
        message: 'hello vue. js',
        info: 'title info'
    },
    filters: {
    // 在 filters 节点下定义“过滤器”
        capitalize(str) {
    //把首字母转为大写的过滤器
            return str.charAt(0).toUpperCase(