Vue3中v-if与HTML实体字符串比较失效的问题咨询

架构老林

2026-7-5

Vue3中v-if比较HTML实体字符串返回false的原因及解决方案

问题原因

你遇到的问题核心是Vue3与Vue2在模板表达式对HTML实体的处理逻辑不同：

你的computed属性返回的是字符串'<'（因为'&lt;'在JavaScript中对应<）。
在Vue3的模板表达式里，字符串字面量中的HTML实体（比如'<'）会被自动解码为对应的字符<，所以实际比较的是'<' === '<'，结果自然为false。
而Vue2中模板表达式不会对这些实体进行解码，比较的是原始字符串'<' === '<'，因此返回true。

Vue3的相关变更点

Vue3的模板编译器做了行为调整，会自动解码表达式中的HTML实体为对应字符，这一变更旨在对齐原生HTML的处理逻辑，避免实体在表达式中出现双重转义的问题。

解决方案

根据你需要保留HTML实体字符串的需求，提供两种可行方案：

方案1：在模板表达式中使用转义后的实体

将模板中的比较值改为'&lt;'，Vue3会将&解码为&，最终得到字符串'<'，与computed返回值一致：

<template v-if="text === '&amp;lt;'">

方案2：在脚本中定义目标字符串常量

把需要比较的实体字符串放在脚本中定义，避免模板编译器的解码处理：

<script>
export default {
  computed: {
    text() {
      return '&amp;lt;'
    },
    targetEntity() {
      // 直接定义原始实体字符串，不受模板解码影响
      return '&lt;'
    }
  }
}
</script>

<template>
  <div>
    <template v-if="text === targetEntity">
      <h1>Yes</h1>
      <span v-html="text"></span>
    </template>
    <template v-else>
      <h1>No</h1>
      <span class="label label-default">{{text}}</span>
    </template>
  </div>
</template>