Vue InstantSearch组件中如何渲染星级评分的HTML字符串？

核心用Vue自带的v-html指令就行，不用手动找元素、设置innerHTML，直接绑定你的评分HTML字符串就能渲染成真实DOM，结合InstantSearch的组件结构具体实现如下：

1. 基础实现（以<ais-hits>为例） #

假设你已经有生成评分HTML的方法，直接在产品列表的模板里用v-html绑定即可：

<template>
  <ais-hits>
    <template #item="{ item }">
      <div class="product-card">
        <h4>{{ item.title }}</h4>
        <!-- 这里用v-html渲染评分HTML -->
        <div class="rating" v-html="getRatingHtml(item.rating)"></div>
        <p>{{ item.price }}</p>
      </div>
    </template>
  </ais-hits>
</template>

<script setup>
// 你的评分HTML生成方法（示例）
const getRatingHtml = (rating) => {
  let html = '';
  const fullStars = Math.floor(rating);
  const hasHalf = rating % 1 >= 0.5;
  const emptyStars = 5 - fullStars - (hasHalf ? 1 : 0);

  // 生成全星
  for (let i = 0; i < fullStars; i++) {
    html += '<span class="star full">★</span>';
  }
  // 生成半星
  if (hasHalf) {
    html += '<span class="star half">★</span>';
  }
  // 生成空星
  for (let i = 0; i < emptyStars; i++) {
    html += '<span class="star empty">★</span>';
  }
  return html;
};
</script>

<style scoped>
.star {
  font-size: 16px;
}
.star.full {
  color: #ffb400;
}
.star.half {
  background: linear-gradient(90deg, #ffb400 50%, #ddd 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.star.empty {
  color: #ddd;
}
</style>

2. 关键注意点 #

• 别手动操作innerHTML：Vue的虚拟DOM会自动处理DOM更新，手动改innerHTML会绕过响应式，还可能引发XSS风险（如果评分数据来自用户输入，一定要确保内容安全）。
• 自定义组件同理：如果你是封装自己的InstantSearch组件，只要在模板里给需要渲染评分的元素加上v-html绑定就行，不用去获取当前元素——Vue会自动把HTML渲染到对应位置。

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