使用三元运算符显示状态中的特定项

condition ? value_if_true : value_if_false

const status = { statusType: 'active' };

const displayText = status.statusType === 'active' ? 'Active' : 'Inactive';
console.log(displayText); // 输出: Active

const status = { statusType: 'pending' };

let displayText;
if (status.statusType === 'active') {
  displayText = 'Active';
} else if (status.statusType === 'inactive') {
  displayText = 'Inactive';
} else {
  displayText = 'Pending';
}
console.log(displayText); // 输出: Pending

<template>
  <div>
    <span v-if="status.statusType === 'active'">Active</span>
    <span v-else-if="status.statusType === 'inactive'">Inactive</span>
    <span v-else>pending</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: { statusType: 'pending' }
    };
  }
};
</script>