vue渲染数据的一点问题

Question

div v-for="(item,i) in dataList" :key="i" class="wrapper">
    <div class="top-title" :id="item.id">
        <div class="name">{{item.product}}</div>
        <div class="num">{{item.status}}</div>
      </div>
      </div>

item.status是从后台拿到的状态码，例如status是10，我要相应地变成文字‘成功’，返回是20，我要相应变成文字‘失败’，用JQ的话可以渲染一个一个判断，但是这种页面渲染的话应该怎么实现？
有想过用ref获取渲染出来的状态码，然后通过方法判断，但实现起来还是有问题，麻烦各位大佬赐教

Answer 1

1. 通过方法

methods: {
    filter(key) {
        return status[key]
    }
}

//这样子调用
<div class="num">{{filter(item.status)}}</div>

1. 或者在获取数据之后就遍历一遍重新赋值一个新字段表示状态
2. 在data里面放置一个status

//这样子调用
<div class="num">{{status[item.status]}}</div>

Answer 2

用过滤器，判断状态码返回相应内容，或者计算属性

Answer 3

methods 定义一个方法，传入状态码返回值是对应文字就可以。应该还可以靠 filter 实现。

Answer 4

{{item.status === 10 ? '成功' : '失败'}}