Vue中是否有替代if/else的空字符串变量检查方法？

嗨，我完全理解你的困扰——刚学Vue的时候，确实容易陷入命令式的if/else堆里，而忘了Vue推崇的声明式、更简洁的写法。其实Vue本身没有直接替代这类条件判断的内置函数，但我们可以用一些更符合Vue风格的技巧来简化代码，彻底摆脱冗长的条件链。

针对你给出的场景，我整理了两种最常用的优化方式：

1. 用「对象映射表」替代链式if/else #

把不同cat值对应的逻辑封装成独立函数，存在一个对象里，通过键值直接调用对应的处理逻辑，既清晰又易于扩展：

// 定义不同条件对应的处理函数
const catLogicMap = {
  'All Modules': () => {
    // 用filter过滤空值，替代多个if判断
    const validAssets = [this.assetType, this.assetFormat, this.assetUse]
      .filter(item => item !== ''); // 或者直接用filter(Boolean)过滤所有假值
    
    // 最后追加assetMod并返回
    return [...validAssets, this.assetMod];
  },
  'All Types': () => {
    // 这里补充你未写完的逻辑，比如处理其他属性
    const validItems = [/* 你的其他属性 */].filter(Boolean);
    return validItems;
  }
};

// 直接通过cat值调用对应的逻辑，不存在的cat则返回空数组
this.catArr = catLogicMap[cat]?.() || [];

这种方式的好处是：新增cat类型时，只需要在catLogicMap里加新的键值对，不用修改条件判断的结构，完全符合开闭原则。

2. 用计算属性实现响应式自动更新 #

如果catArr是依赖cat和各类asset属性动态变化的，把它改成计算属性会更符合Vue的响应式思想——不用手动赋值，Vue会自动跟踪依赖并更新：

computed: {
  catArr() {
    const catLogicMap = {
      'All Modules': () => {
        return [this.assetType, this.assetFormat, this.assetUse]
          .filter(Boolean) // 自动过滤空字符串、null、undefined等假值
          .concat(this.assetMod);
      },
      'All Types': () => {
        // 补充你的逻辑，比如返回对应数组
        return [this.assetMod, this.assetOther].filter(Boolean);
      }
    };

    return catLogicMap[this.cat]?.() || [];
  }
}

之后你在模板里直接用{{ catArr }}就行，完全不用再写this.catArr = []这类手动赋值的代码，彻底拥抱Vue的声明式编程。

额外小技巧：用filter(Boolean)简化空值判断 #

filter(Boolean)是个非常实用的小技巧，它会自动把数组里的假值（空字符串''、null、undefined、0等）过滤掉，比写item !== ''更简洁，而且适用性更广。

总结一下：Vue的核心是声明式编程——描述“要得到什么”，而不是“一步步怎么做”。用对象映射、数组方法和计算属性来重构代码，不仅能摆脱冗长的if/else，还能让代码更符合Vue的设计思想，维护起来也轻松很多。

内容的提问来源于stack exchange，提问作者user3869231