Vue中过滤器filters的使用

一、什么是过滤器

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

<!-- 在双花括号中 -->

{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->

<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>