如何在 Vue js 中使用过滤器？答案

【问题标题】：How to use filters in Vue js?如何在 Vue js 中使用过滤器？
【发布时间】：2018-09-16 06:45:33
【问题描述】：

我需要在 vue js 2 中使用过滤器“capitalize”，但是当我根据文档添加过滤器时，它给了我错误。

我的代码

        <template>
        <div class="test">
            <h1>{{title}}</h1>
            <ul>
                <li v-for="item in items | capitalize" :key="item.first">{{item.first}},{{item.last}}</li>
            </ul>
        </div>
        </template>


        <script>
        export default {
        name: 'test',
        vinput: '',
        data () {
            return {
            title: 'Hello,
            items: [
                {
                first: 'John0',
                last: 'Doe'
                },
                {
                first: 'Pavel',
                last: 'Doe'
                },
                {
                first: 'Shox',
                last: 'Doe'
                }
            ]
            }
        },
        filters: {
            capitalize: function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
            }
        }
        }
        </script>

错误

enter image description here

任何想法，如何纠正该错误？

【问题讨论】：

需要显示更多代码
现在可以了吗？
你不能大写对象，至少不能用你写的过滤函数。事实上它接受字符串被传递。你的过滤器应该在这里使用{{item.first | capitalize}},{{item.last | capitalize}}
你能帮忙改一下这段代码吗，因为我是初学者，对我来说有点困难
Filter list with Vue.js的可能重复

标签： vue.js vuejs2

【解决方案1】：

首先，我们要在main.js中定义如下。

Vue.filter('UpperCase', function(val) {
  return val.toUpperCase()
})

然后，我们要在需要的地方使用，如下图所示。

<div>{{ name | UpperCase }}</div>

你想要什么函数，写函数并调用它。

【讨论】：

【解决方案2】：

在模板语法中使用过滤器。

<li v-for="item in items" :key="item.first">{{item.first | capitalize}},{{item.last | capitalize}}</li>

【讨论】：