消息关闭
    暂无新消息!

我想让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>

5个回答

︿ 1

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

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

  1. class的绑定,你要告诉vue你要绑定的属性。:class:{}v-bind:class:{}

  2. filter语法问题。 当你传多个参数时应该这样: {'big': item | isBig(item.a, item.b)}。vue 的filter是函数,所以可以这样使用。不过注意形参的使用, 这个过滤器中, item为第一个参数, item.a 为第二个参数, item.b 为第三个参数。

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


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