javascript - vue v-for中filter没有起效果？

问题描述

问 题

<dl id="list">
    <template >
        <dd class="{{ message.type | convertType }}" v-for="message in messages">
            <ul>
                <li class="nick-name">{{ message.nickname }}</li>
                <li class="detail">
                    <div class="head-icon"></div>
                    <div class="text" v-if="message.dataType === 1">
                        <img src="{{ message.img }}">
                    </div>
                    <div class="text" v-else>
                        {{ message.text }}
                    </div>
                </li>
            </ul>
        </dd>
    </template>
</dl>

var vm = new Vue({
        el: "#list",
        data: {
            messages: []
        },
        filters: {
            convertType: function (type) {
                return type === 0 ? 'me' : 'other';
            }
        }
    });

这是结果：

messageType没有起效果，这是为什么？

解决方案

你看是不是有警告信息。
要使用v-bind:class="value|filter"的形式
应该是用的2.X版本Vue吧，看下说明。传送门

这篇关于javascript - vue v-for中filter没有起效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！