javascript - Vue表格行中的多条件

Question

我是使用 Vue 的新手，我有点卡住了。我已经弄清楚了 v-if 条件的绑定(bind)和使用，即如果条件为真或为假，则显示一件事，但我不知道如何采用条件来显示多种可能性作为 if/else/else 基本上。我有这个:

<td v-if="dateEvent.id=== '2' && dateEvent.name === 'Title'"><button" type="button" class=" taskButton btn-default"><a style="color:white;">Accept</a></button></td>

其工作原理是，如果 id 和名称匹配，则显示带有按钮的行。我想要做的是使用 dateEvent.status 并说 if status = 'O' 显示此按钮，否则 if status = 'P' 显示“In Progress” else if status = 'C ' 显示“已完成”

如何使这一行始终显示，但仅根据对象中的状态显示按钮或不同的文本？

Answer 1

使用计算的

我认为应该有效

<td>{{status}}</td>

computed: {
status(){
  if(dateEvent.status === 'O'){
    return `<button" type="button" class=" taskButton btn-default"><a style="color:white;">Accept</a></button>`
  }else{
    if(dateEvent.status === 'P'){
      return 'In Progress'
    }else{
      return 'Completed'
    }
  }
}

}