Question

我希望使用过滤器将返回的值交换为html清单图标，方法是这样做

filters: {
        checkStatus: function(value){
            if(value > 0){
                return '<span class="bg-orange-400 text-highlight"><i class="icon-check"></i></span>'
            }else{
                return '<span class="bg-teal-300 text-highlight"><i class="icon-cross3"></i></span>'
            }
        }
    }

在我的表格中，我就是这样做的

<td>{{props.item.published | checkStatus}}</td>

但它返回图标或一些html标签，它只是返回转义的HTML。那么如何让它返回未转义的价值呢？我试图使用三重花括号但不起作用。

或者我做错了？我知道我也可以在html中使用v-if和v-else，但这样它更清晰，我可以将它重用于其他值。

更新

有人指出使用计算属性，是的，这是我头脑中遇到的第一件事，但我无法使用它...请看一下这个question所以我的{{ 1}}来自v-for slot内的我的子组件。

Answer 1

您必须使用v-html并通过$options

调用过滤器

<td v-html="$options.filters.checkStatus(props.item.published)"></td>

但我真的建议在绑定类上使用计算属性或内联三元表达式，例如。

使用内联三元：

<td>
    <span :class="[props.item.published > 0 ? 'bg-orange-400' : 'bg-teal-300']" class="text-highlight">
        <i :class="[props.item.published > 0 ? 'icon-check' : 'icon-cross3']"></i>
    </span>
</td>

使用计算属性：

<td>
    <span :class="spanClass" class="text-highlight">
        <i :class="iconClass"></i>
    </span>
</td>

computed: {
    spanClass() {
        return this.props.item.published > 0 ? 'bg-orange-400' : 'bg-teal-300';
    },
    iconClass() {
        return this.props.item.published > 0 ? 'icon-check' : 'icon-cross3';
    },
}

unescape从过滤器返回值

1 个答案: