vue中关于多状态渲染不同dom的小技巧

如图：右侧的状态小文本和icon，根据不同的status值显现不同的状态（颜色，文本内容）

常规做法：

<i
    v-if="build.workStatus===2"
    class="el-icon-loading "
></i>
<i
    v-else-if="build.workStatus===0"
    class="el-icon-loading "
></i>
<i
    v-else="build.workStatus===1"
></i>
<span
    v-if="build.workStatus===2"
    
>图片生成失败</span>
<i
    v-else-if="build.workStatus===0"
    class="el-icon-loading "
>图片生成中</i>
<span
    v-else="build.workStatus===1"
>图片生成成功</span>

这个写法非常不优雅。瞬间觉得jsx的写法的高妙所在了。vue中如果用render函数来写这个案例，我们需要重新写一个js文件，通过render函数写一个组件通过传值再次导入。还是比较繁琐。

接下来我们采用这种写法：

  <div
        v-for="(build, idx) in builds"
        :key="idx"
        class="build-info-section"
  > 
            <span v-html="parseIcon(build.workStatus)"></span>
                <span
                  :class="build.workStatus ===1?'success': build.workStatus ===0 ?'':'error' "
              class="loading-status"
            >
              {{parseStatus(build.workStatus)}}
            </span>
--------------------------------------------------------

methods: {
    parseIcon(status) {
      let str = "";
      switch (status) {
        case 0:
          str = `<i class="el-icon-loading"></i> `;
          break;
        case 1:
          str = "<i></i>";
          break;
        case 2:
          str = `<i class="el-icon-warning work-status-error"> </i>`;
          break;
        default:
          str = "<i></i>";
      }
      return str;
    },
    parseStatus(status) {
      let str = "";
      switch (status) {
        case 0:
          str = `图纸生成中 `;
          break;
        case 1:
          str = "图纸生成成功";
          break;
        case 2:
          str = "图纸生成失败";
          break;
        default:
          str = "";
      }
      return str;
    },
}

这个写法通过js来控制更加灵活。注意在template里需要通过v-html来生成。还有一点。这里由于是动态生成的dom，所以work-status-error这个错误样式在scoped下是无效的。应该改成全局的。也就是说在<style>.work-status-error{color:#f00}</style>才生效