如何在Vuetify VSelect中正确显示HTML实体（分数符号）

我之前也碰到过一模一样的问题！VSelect默认会把text属性当成纯文本渲染，所以像¼这种HTML实体不会被转换成对应的分数符号。这里有两个靠谱的解决方法，你可以根据场景选：

方法1：用自定义Item Slot直接控制渲染（推荐） #

Vuetify的VSelect支持通过插槽自定义选项的显示内容，我们可以用item插槽结合v-html指令来解析HTML实体：

<VSelect :items="common.users.options">
  <!-- 自定义每个下拉选项的渲染模板 -->
  <template v-slot:item="{ item }">
    <span v-html="item.text"></span>
  </template>
  <!-- 如果你需要自定义选中后的显示样式，再加个selection插槽 -->
  <template v-slot:selection="{ item }">
    <span v-html="item.text"></span>
  </template>
</VSelect>

这样设置后，每个选项的text内容会被当成HTML解析，¼和½就会正常显示成¼和½了。

方法2：提前解码HTML实体再传入组件 #

如果不想修改组件模板，也可以在生成common.users.options的时候，先把HTML实体解码成对应的字符：

// 写一个简单的解码工具函数
function decodeHtmlEntities(str) {
  const tempTextarea = document.createElement('textarea');
  tempTextarea.innerHTML = str;
  return tempTextarea.value;
}

// 处理你的选项数组
common.users.options = [
  { value: ".25", text: decodeHtmlEntities("¼ hour") },
  { value: ".5", text: decodeHtmlEntities("½ hour") }
];

处理完之后，直接用原来的VSelect代码就能正常显示分数符号了。这种方法更安全，适合选项内容来自不可信来源的场景，避免了v-html可能带来的XSS风险。

小提醒 #

• 如果你的选项内容是用户输入的或者来自外部不可信数据，优先选方法2，不要用v-html，防止恶意代码注入。
• 如果你用的是Vuetify 3，插槽的语法可能略有变化，但核心思路还是自定义渲染或者提前解码。

内容的提问来源于stack exchange，提问作者Nika Kurashvili