uni-app 取值undefined的问题

uni-app 取值undefined的问题

开发环境 版本号 项目创建方式
Mac 10.15.7 HBuilderX

示例代码：

<template> <view class=""> <view class="">{{test.a}}</view> <view class="">测试{{test.a}}</view> <view class="">{{'测试'+test.a}}</view> <view class=""><text>测试</text><text>{{test.a}}</text></view> </view> </template> <script> export default { data() { return { test:{ } } } } </script> <style lang="scss" scoped> </style> 

### 操作步骤：


执行代码就可以了看到

预期结果：

不出现undefined


### 实际结果：


不符合预期

bug描述：

对象中的字段如果不存在会报undefined


更多关于uni-app 取值undefined的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

正常情况下当需要使用某个对象中的属性时，都会在外层先通过 v-if 判断一下这个对象中的属性是否存在，如果使用一个不存在的属性，报 undefined 才应该是正确的

更多关于uni-app 取值undefined的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


写的几种如果 都出现 undefined 那也可以接受 为什么 有的 不出现

这是 uni-app 数据绑定的正常行为，不是 bug。

当 test.a 未定义时，模板渲染会显示 undefined。在 uni-app 的模板渲染机制中：

  1. 纯插值表达式 {{test.a}}：当值为 undefined 时，渲染为空字符串
  2. 混合文本插值 测试{{test.a}}：由于字符串拼接，undefined 会被转换为字符串显示
  3. 表达式拼接 {{'测试'+test.a}}：JavaScript 字符串运算会将 undefined 转为字符串

解决方案：

  1. 初始化数据时定义默认值：
data() {
  return {
    test: {
      a: '' // 或 null、默认值
    }
  }
}
  1. 使用条件渲染：
<view v-if="test.a">测试{{test.a}}</view>
  1. 使用默认值：
<view>测试{{test.a || ''}}</view>
  1. 计算属性处理：
computed: {
  displayText() {
    return this.test.a ? `测试${this.test.a}` : '测试'
  }
}
回到顶部