[Vue] Parsing error: invalid-first-character-of-tag-name 报错定位与解决

前一段时间总在写React项目，tsx中写dom用三元运算符用的多。
这次写Vue项目，把写三元运算符的习惯带到了vue的模板语法中，同时条件表达式中用了小于号"<"，结果编译正常，网页展示正常，eslint报错"invalid-first-character-of-tag-name"。

举个例子

解决办法(回到Vue的世界，别在React里打转)：
1、filter （不推荐，Vue3废弃了filter）

2、methods里面定义一个function用于格式化 （推荐）

3、使用转义符 （骚操作范畴，不推荐）

"<" 变为 "&lt;"

这种情况下eslint校验通过，编译可通过，页面也正常显示，但是装了vscode插件Volar (或者Vetur) 的情况下使用转义符的地方会飘红。

4、使用v-text （不推荐，不能复用）

完结

同步更新到自己的语雀
https://www.yuque.com/diracke...