vue class绑定与过滤器结合时报错

我想让a+b>5的时候，给p标签一个big类，我使用了过滤器，但是报错了.
请问这是为什么，有什么其他解决方法吗？

[Vue warn]: Invalid expression. Generated function body:  {'big':scope.item
warn @ vue.js:1023
3vue.js:1023 [Vue warn]: Failed to resolve filter: isBig

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
    <style type="text/css">
        .big{
            background: gray;
        }
    </style>
</head>
<body>

<div id="saiku">
    <p v-for="item in list" class="{'big': item | isBig item.a item.b}">{{item.name}}</p>
</div>

<script type="text/javascript">
    'use strict';
    var vm = new Vue({
        el: '#saiku',
        data: {
            list:[
                {a:1, b:2, name: 'aaa'},
                {a:11, b:2, name: 'bbb'},
                {a:1, b:2, name: 'ccc'}
            ]
        }
    });

    Vue.filter('isBig', function(v,a,b){

        if(a+b > 5){
            return true;
        }
        else{
            return false;
        }
    });
</script>

</body>
</html>

node.js

chrome sublime-text javascript vue.js

阅读 10.7k

5 个回答

我不知道啊

✓ 已被采纳

不要用过滤器，用method,还有class前面要加":"冒号或者"v-bind:"

悠扬小Q

2.3k1412

发布于
2017-03-10

更新于
2017-03-10

谢邀。来晚了，不好意思。

首先你的写法有两个问题：

class的绑定，你要告诉vue你要绑定的属性。:class:{}或v-bind:class:{}。
filter语法问题。当你传多个参数时应该这样: {'big': item | isBig(item.a, item.b)}。vue 的filter是函数，所以可以这样使用。不过注意形参的使用, 这个过滤器中, item为第一个参数, item.a 为第二个参数， item.b 为第三个参数。

建议多看文档：vue filter官方文档

最后说下, 关于filter你使用的场景不对。vue中的过滤器与指令都是全局注册的，所以类似于一种公共方法的作用。你只是单独一个模块使用，而且你也只是为了判断一个class，所以就像上面那个哥们说的应该用methods最合适了。