Vue.js 3 v-if 三元函数，如何将对象作为条件传递

Question

<div :class="cellProps.rowData.BrandColor ? 'bluText' : 'redText'">
    <p v-if="cellProps.rowData.BrandColor ? message='cellProps.rowData.BrandColor' : message='NO VALUE PRESENT' ">Brand Color#: {{ message }}</p>
</div>

我正在从数据 Table 中引入数据，并使用 v-if 我正在检查 cellProps.rowData.BrandColor 是否有值，如果有，我想将该值用作消息，如果没有，请使用“NO VALUE PRESENT”。

class 工作正常，但将值作为消息传递时工作不正常。我感觉我没有将它正确传递给消息。将值 cellProps.rowData.BrandColor 传递给消息的正确方法是什么？

Answer 1

您可以使用 v-if/v-else:

的组合

<div :class="cellProps.rowData.BrandColor ? 'bluText' : 'redText'">
    <p v-if="cellProps.rowData.BrandColor">Brand Color#: {{ cellProps.rowData.BrandColor}}</p>
    <p v-else>Brand Color#: NO VALUE PRESENT</p>
</div>

可以通过在 p 中使用 span 来缩短：

<div :class="cellProps.rowData.BrandColor ? 'bluText' : 'redText'">
    <p>
        Brand Color#: 
        <span v-if="cellProps.rowData.BrandColor">{{ cellProps.rowData.BrandColor }}</span>
        <span v-else>NO VALUE PRESENT</span>
    </p>
</div>

Answer 2

或者你也可以这样使用：

<p v-if="cellProps.rowData.BrandColor"> .... </p> 
<p v-if="!cellProps.rowData.BrandColor"> NO VALUE PRESENT</p>

Answer 3

<div :class="cellProps.rowData.BrandColor ? 'bluText' : 'redText'">
    <p v-if="cellProps.rowData.BrandColor ? 
     message='cellProps.rowData.BrandColor' : message='NO VALUE PRESENT' 
    ">Brand Color#: {{ message }}</p>
</div>

为了设置 message='cellProps.rowData.BrandColor' ，我学会了像这样去掉单引号：

 message= cellProps.rowData.BrandColor

最终版本：

<div :class="cellProps.rowData.BrandColor ? 'bluText' : 'redText'">
    <p v-if="cellProps.rowData.BrandColor ? 
     message= cellProps.rowData.BrandColor : message='NO VALUE PRESENT' 
    ">Brand Color#: {{ message }}</p>
</div>

Answer 4

使用带有三元运算符的 v-if 来 设置数据属性 是错误的。您可以使用@Anurag Srivastava 解决方案，或者您可以使用 computed property。这是代码：

<div :class="cellProps.rowData.BrandColor ? 'bluText' : 'redText'">
    <p v-if="cellProps.rowData.BrandColor ? 
     message='cellProps.rowData.BrandColor' : message='NO VALUE PRESENT' 
    ">Brand Color#: {{ message }}</p>
</div>

使用options api：

export default() {
  // ...
  computed: {
    message() {
      return this.cellProps.rowData.BrandColor ?? 'NO VALUE PRESENT'
    }
  },
  // ...

使用 composition api 脚本设置：

import { computed } from 'vue'
// ...
const message = computed(() => props.cellProps.rowData.BrandColor ?? 'NO VALUE PRESENT')
// ...

Vue.js 3 v-if 三元函数，如何将对象作为条件传递

Vue.js 3 v-if ternary function, how to pass object as a conditional

javascript

ternary

vuejs3