细节:双花括号({{ ... }})在Vue中的用法-无法取值问题

一、问题:

为什么后端返回的是数字类型时, {{ 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.managerscope.row.managerPhoneNumber 都为空时,整个表达式的执行步骤如下:

  1. scope.row.manager + "-" + scope.row.managerPhoneNumber 的结果为 "null-null",因为 scope.row.managerscope.row.managerPhoneNumber 都为空,所以拼接操作会将它们解释为字符串 "null"

  2. 然后,"null-null" || "-" 的结果为 "null-null",因为在逻辑或运算中,如果第一个操作数是真(非空),则返回第一个操作数的值,否则返回第二个操作数的值。在这里,"null-null" 被视为真,所以整个表达式的结果就是 "null-null"

 改正后代码:

方法二:

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

表达式的执行步骤如下:

  1. (scope.row.manager || '-'):首先判断 scope.row.manager 是否为空。如果为空,返回 '-',否则返回 scope.row.manager 的值。这确保了在 manager 为空时,展示的是短横线 -

  2. (scope.row.managerPhoneNumber || '-'):然后判断 scope.row.managerPhoneNumber 是否为空。如果为空,返回 '-',否则返回 scope.row.managerPhoneNumber 的值。这确保了在 managerPhoneNumber 为空时,同样展示的是短横线 -

  3. 将两部分的结果用 "-" 进行拼接,得到最终的展示结果。

这样,无论 managermanagerPhoneNumber 是否为空,都会在需要的地方展示短横线 -,而不是显示 null 或其他不希望的结果。

 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用\[1\]:在进行HTML理论学习Vue时,出现了如标题所示的报错 GET https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js net::ERR_CONNECTION_ 解决方法 1.前往官网下载vue.js源码文件 。 引用\[2\]:报错原因是没有找到样式文件;有可能是引入的资源失效了;所以得重新引入一下资源;我用的是vant所以进入以下网址找到对应版本的CSS文件导入代码辅助到项目vant - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers 。 问题:https://cdn.jsdelivr.net/npm/vue 过期 回答: 根据您提供的信息,报错信息是GET https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js net::ERR_CONNECTION_,这个错误通常是由于无法连接到指定的资源引起的。解决这个问题的方法有两种。第一种方法是前往Vue官网下载vue.js源码文件,然后将其引入到您的项目。第二种方法是检查您引入的资源是否失效,有可能是资源链接过期了。您可以尝试重新引入资源,或者找到对应版本的CSS文件并将其导入到您的项目。如果您使用的是vant库,您可以访问vant的官方网站,找到对应版本的CSS文件,并将其引入到您的项目。希望这些解决方法能够帮助您解决问题。 #### 引用[.reference_title] - *1* [GET https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js net::ERR_CONNECTION_](https://blog.csdn.net/qq_22841387/article/details/125115602)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [解决报错:GET https://cdn.jsdelivr.net/npm/vant@3/lib/index.css net::ERR_NAME_NOT_RESOLVED](https://blog.csdn.net/qq_41812381/article/details/124725083)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值