Vue中带条件的表格行实现鼠标悬停切换背景色求助

先纠正你代码里的两个问题：

• Vue事件绑定不需要加on前缀，应该用@mouseover而非@onmouseover
• 你用的row是Object.keys()返回的键名字符串，row.ticker会是undefined，key应该直接用row，或者更合理的是遍历对象值而非键名

推荐两种实现方式，根据你的需求选择：

方式一：纯CSS实现（最简单，优先推荐） #

不需要写JS逻辑，直接用CSS的:hover伪类就能实现，性能也更好：

/* 全局或组件内的样式 */
tr {
  background-color: #ffffff; /* 默认背景色 */
  transition: background-color 0.3s; /* 可选：添加过渡动画，更丝滑 */
}

tr:hover {
  background-color: black;
  color: white; /* 建议把文字改成白色，否则黑背景下文字看不清 */
}

对应的Vue模板部分正常写循环即可，不用加事件绑定：

<tr v-for="row in Object.keys(tidyMarketOrders)" :key="row">
  <!-- 你的表格单元格内容 -->
</tr>

如果需要针对部分行禁用悬停效果，可以给这些行加个类，用CSS排除：

tr:not(.no-hover):hover {
  background-color: black;
  color: white;
}

模板里给不需要变色的行绑定:class="{ 'no-hover': 你的条件 }"就行。

方式二：Vue动态绑定（适合需要结合复杂条件判断的场景） #

如果必须通过JS控制（比如根据某些数据状态决定是否允许变色），可以用动态类+事件绑定：

模板部分 #

<tr 
  v-for="(item, ticker) in tidyMarketOrders" 
  :key="item.ticker" <!-- 如果item有ticker属性，用这个当key更稳妥 -->
  :class="{ 'row-hover': hoveredTicker === ticker }"
  @mouseover="hoveredTicker = ticker"
  @mouseleave="hoveredTicker = null"
>
  <!-- 表格内容 -->
</tr>

脚本部分 #

export default {
  data() {
    return {
      hoveredTicker: null,
      tidyMarketOrders: {} // 你的源数据
    }
  }
}

样式部分 #

.row-hover {
  background-color: black;
  color: white;
}

tr {
  background-color: #fff;
  transition: background-color 0.3s;
}

这样就能实现鼠标悬停时行背景变黑，离开时恢复默认样式，同时也能结合你的条件判断逻辑调整（比如在@mouseover里加判断，只有满足条件才赋值hoveredTicker）。

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