vue的插值表达式怎么处理的undefined和null

  • Z时代
  • 2024-02-19
  • 分类：IT

vue的插值表达式怎么处理的undefined和null

vue的插值表达式是默认会把undefined和null转为空字符串吗？

<div>名字：{{detail.name}}</div>
data: function () {
    return {
      detail: {
         age: 12
      }
    }
  }

像上面的代码实际渲染出来的是"名字：" 而不是 "名字：undefiend"
所以在vue里写业务的时候，用不着写个全局过滤器统一判断下字段不存在时转为空字符串吧

回答：

一般情况下，不用写全局过滤器判断，vue已经做了处理。

https://ustbhuangyi.github.io...
这里写了vue template编译后的代码，可以看到模板变量调用了一个_s的方法。

而，源码src/core/instance/render-helpers/index.js中可以找到_s调用的是src/shared/util。js里的toString方法

/**
 * Convert a value to a string that is actually rendered.
 */
export function toString (val: any): string {
  return val == null
    ? ''
    : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
      ? JSON.stringify(val, null, 2)
      : String(val)
}

回答：

<div>名字：{{detail.name || emptyStr}}</div>
...
...
data () {
emptyStr: '--'
}

以上是 vue的插值表达式怎么处理的undefined和null 的全部内容， 来源链接： utcz.com/p/936714.html

回到顶部