Eslint:Parsing error: invalid-first-character-of-tag-name

悠扬的幻想天空 - 博客

November 25, 2021 技术 • 作者:悠扬

最近在使用Vue的时候把三元运算符写进template部分的时候遇到了如下错误Eslint:Parsing error: invalid-first-character-of-tag-name,例子如下:

<div>
  {{ (test.tag < 1) ? '状态是大于1的' : '状态是小于1的' }}
  // 在这边我们希望可以根据test.tag这个状态来控制我们想要输出的内容或者数据
</div>

其实上面这个代码是可以正常运行的,但是Eslint会报错,因为在Html代码中会校验到一个单独的<号,会被Eslint认为是Html代码的一部分而不会认为是模板语言,但因为Vue会去解析这部分的表达式再进行输出所以我们是可以正常运行的,那么不想让Eslint报错的话也是有办法的。

网上有文章说使用转义码替换掉<,太不优雅了,使用computed计算数据。

<div>
  {{ testText }}
</div>


const testText = computed(() => {
        return (test.tag < 1) ? '状态是大于1的' : '状态是小于1的';
      });

添加新评论