在三元运算符中使用多个条件时，我的 Vue 应用程序无法加载

问题是operator precendece。表达式计算为

@H_772_5@(typeof weather.main != 'undefined' && weather.main.temp < 16) ? '' : (weather.main.temp < 18 ?'chill': weather.main.temp < 30 ?'warm':'hot')

当 @H_772_5@weather.main.temp < 18 未定义时，这会导致评估 @H_772_5@weather.main。

解决方案是不要将不可读的代码放入模板中，并将其移动到计算属性中，在那里它可以以易于理解和维护的形式编写。 @H_772_5@typeof 检查未定义值只需要潜在未定义的变量。可选链可用于 Vue 2 中的计算属性以避免条件检查，以及 Vue 3 中的模板。

可以是：

@H_772_5@computed: {
  appClass() {
    if (!weather.main || weather.main.temp < 16)
      return '';
    else if (weather.main.temp < 18)
      return 'chill';
    else if (weather.main.temp < 30)
      return 'warm';
    else 
      return 'hot';
  }
}