记一次Eslint：Parsing error: invalid-first-character-of-tag-name校验错误

最近在使用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报错的话也是有办法的

1.转义符(原始码)方法
参考来源：https://blog.csdn.net/Antoinette_Xiao/article/details/86141143
我们可以使用Html的转义符来进行对<或>号替换，这样就可以达到Eslint不报错的目的，Vue也可以正常运行，很方便，一举两得直接就解决了以上错误

<div>
  {{ (test.tag &lt; 1) ? '状态是大于1的' : '状态是小于1的' }}
  // 通过把<号替换成&lt;就能达到效果并且Eslint不报错了
</div>

2.v-text方法
如果我们的需求只是输出纯文本内容的话那么我们可以使用v-text方法来达到目的，直接这样子做就好了

<div
  v-text="(test.tag < 1) ? '状态是大于1的' : '状态是小于1的'"
>
  // 这样我们就使用v-text来达到我们想要的效果了同样的Eslint也不会报错
</div>
Last modification：January 18th, 2020 at 02:01 pm
© 允许规范转载
If you think my article is useful to you, please feel free to appreciate