Vue中过滤器filters的使用

最新推荐文章于 2025-07-11 11:54:59 发布

原创最新推荐文章于 2025-07-11 11:54:59 发布 · 530 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了Vue.js中的过滤器功能，包括其在双花括号插值和v-bind表达式中的使用方式。通过示例展示了如何创建自定义过滤器，并给出了一个将输入值加10的实例。过滤器可用于文本格式化，使得数据呈现更符合需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

{{ message | capitalize }}



<div v-bind:id="rawId | formatId"></div>

二、简单的实例

到输入值时展示当前值加10后的数据

<template>
  <div id="demo">
    <input type="text" name="" id="" v-model="num" v-focus>
    {{num | newnum}}
  </div>
</template>

<script>
export default {
  filters:{
    newnum:(value)=>{
      if(!value)return
      return Number(value)+1
    }
  },
  data() {
    return {
      num:10
    };
  },
};
</script>

<style>
</style>