细节：双花括号（{{ ... }}）在Vue中的用法-无法取值问题_vue双花括号中的值修改,不显示-CSDN博客

本文链接：https://blog.csdn.net/coinisi_li/article/details/131664952

一、问题：

为什么后端返回的是数字类型时， {{ form.orderPrice }}可以拿到值展示， {{ form.orderPrice || "-" }} 不可以？

接口返回数据：

<el-form-item label="订单金额：" prop="orderPrice"> {{ form.orderPrice || "-" }} 元 {{ form.orderPrice }} </el-form-item>

首先，了解一下双花括号（{{ ... }}）在Vue.js中的用法。双花括号是Vue.js的插值语法，用于将表达式的值渲染到模板中。在这种情况下，{{ form.orderPrice }}用于显示form对象中orderPrice属性的值。

回到问题，为什么 {{ form.orderPrice }} 可以显示返回的数字类型值，而 {{ form.orderPrice || "-" }} 不可以显示。

这是因为 form.orderPrice 是一个数字类型的值，而 || 运算符在JavaScript中的工作方式可能导致不同的结果。

在JavaScript中，|| 运算符表示逻辑或（OR）运算。当应用于两个操作数时，它返回第一个“真值”（可以转换为true的值），如果没有真值，则返回最后一个操作数。换句话说，它将返回第一个非空、非零、非假的值。

如果 form.orderPrice 是一个数字类型的值，并且该值为正数（大于0），那么它被视为一个真值。因此，form.orderPrice || "-" 的结果将是 form.orderPrice 的值，而不是 "-"。这解释了为什么在 {{ form.orderPrice }} 中可以正确显示订单金额。

然而，如果 form.orderPrice 是一个数字类型的值，并且该值为0或为空（或未定义），它将被视为一个假值。在这种情况下，form.orderPrice || "-" 的结果将是 "-"，这解释了为什么 {{ form.orderPrice || "-" }} 不会显示正确的订单金额。

为了确保在 form.orderPrice 为假值时也能显示 "-"，可以考虑使用三元表达式（ternary expression）来实现条件显示：

<el-form-item label="订单金额：" prop="orderPrice">
  {{ form.orderPrice !== null ? form.orderPrice + ' 元' : '-' }}
</el-form-item>

在上述代码中，当 form.orderPrice 不为 null 时，将显示订单金额加上 ' 元'，否则将显示 "-"。这样可以确保在 form.orderPrice 为假值时也能正确显示 "-"。

二、问题：后端返回结果都为null时，

下面的写法一在表格中的展示结果是null-mull

写法一：

<el-table-column

class="header-column"

label="管理人"

align=""

prop="manager"

>

<template slot-scope="scope">

{{ scope.row.manager + "-" + scope.row.managerPhoneNumber || "-" }}

</template>

问题实际上是由于运算符的优先级造成的。在表达式中，不同的运算符具有不同的优先级，这会影响它们的执行顺序。

+ 运算符的优先级高于 || 运算符，所以表达式首先会执行字符串拼接操作，然后才会进行条件运算。

当 scope.row.manager 和 scope.row.managerPhoneNumber 都为空时，整个表达式的执行步骤如下：

scope.row.manager + "-" + scope.row.managerPhoneNumber 的结果为 "null-null"，因为 scope.row.manager 和 scope.row.managerPhoneNumber 都为空，所以拼接操作会将它们解释为字符串 "null"。
然后，"null-null" || "-" 的结果为 "null-null"，因为在逻辑或运算中，如果第一个操作数是真（非空），则返回第一个操作数的值，否则返回第二个操作数的值。在这里，"null-null" 被视为真，所以整个表达式的结果就是 "null-null"。

改正后代码：

方法二：

{{ (scope.row.manager || '-') + "-" + (scope.row.managerPhoneNumber || '-') }}

表达式的执行步骤如下：

(scope.row.manager || '-')：首先判断 scope.row.manager 是否为空。如果为空，返回 '-'，否则返回 scope.row.manager 的值。这确保了在 manager 为空时，展示的是短横线 -。
(scope.row.managerPhoneNumber || '-')：然后判断 scope.row.managerPhoneNumber 是否为空。如果为空，返回 '-'，否则返回 scope.row.managerPhoneNumber 的值。这确保了在 managerPhoneNumber 为空时，同样展示的是短横线 -。
将两部分的结果用 "-" 进行拼接，得到最终的展示结果。