vue如何自定义一个过滤器？

LuckXinXin

于 2020-03-26 17:49:33 发布

阅读量760

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/LuckXinXin/article/details/105015099

版权

Vue 专栏收录该内容

165 篇文章 10 订阅

订阅专栏

本文介绍了如何在Vue.js中创建并使用自定义过滤器。通过示例代码展示了如何定义一个capitalize过滤器，该过滤器可以将输入的字符串首字母大写。同时，文章还介绍了两种定义过滤器的方法，一种是在组件内部定义，另一种是全局定义。

摘要由CSDN通过智能技术生成

答：
html代码：

<div id="app">
     <input type="text" v-model="msg" />
     {{msg| capitalize }}
</div>

JS代码：

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

全局定义过滤器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})