js三元表达式动态渲染HTML

Question

<span style="margin-right:10px" v-if="item.status == 0">状态：未发布</span>
                <span style="margin-right:10px" v-if="item.status == 1">状态：已发布</span>
                <span style="margin-right:10px" v-if="item.status == 2">状态：已下架</span>

我记得有一个三元表达式的写法，写一行span就够了的，请问一下该怎么写来着？

Answer 1

哈喽，三元写法是这样的：

    <span style="margin-right:10px" >状态：{{item.status === 0 ? '未发布': item.status === 1 ? '已发布': '已下架'}}</span>

不过，建议三层及以上条件不要用三元，维护性不好。建议以对象形式获取：

data () {
        return {
            statusObj: {
                0: '未发布',
                1: '已发布',
                2: '已下架',
            },
}

<span style="margin-right:10px" >状态：{{statusObj[item.status]}}</span>