英文:
Mouseover tablerow background color in VUE
问题
我正在尝试在VUE中更改表格行的背景颜色。我希望当鼠标悬停在表格行上时，将其背景颜色更改为黑色，当鼠标离开时，将其恢复为默认颜色。表格行已经具有一个条件。然而，我仍在尝试类似以下的内容：
<tr v-for="row in Object.keys(tidyMarketOrders)" v-bind:key="row.ticker" @onmouseover="color='black'">
英文:
I am trying to change the background color on a Table row in VUE. I want the background color of the table row to be changed to black when the mouse is hovered and back to default when it is not. The table row already has a condition on it. However I am still trying something like this
<tr v-for="row in Object.keys(tidyMarketOrders)" v-bind:key="row.ticker" @onmouseover="color='black'">
答案1
得分: 1
@onmouseover 期望一个 JavaScript 语句或函数。当鼠标悬停在表格行上时，您将字符串 'black' 分配给名为 color 的变量。由于这个变量与 <tr> 没有任何关系，它并没有实现任何功能。
您可以使用 CSS 来实现您的目标。
tr:hover {
background-color: black;
}
如果您绝对必须以编程方式执行此操作，您可以这样做：
<template>
<tr
:style="{ backgroundColor: bgColor }"
@mouseover="bgColor = 'black'"
@mouseleave="bgColor = 'white'"
>
<td>表格行内容</td>
</tr>
</template>
<script>
export default {
data() {
return {
bgColor: 'white'
}
}
}
</script>
您需要使用 @mouseleave 来执行与 @mouseenter 相反的操作，以模拟切换效果。还要注意事件名称不包括单词 "on"。在 Vue 中，您可以省略它，例如 onclick 只需写成 @click。
英文:
@onmouseover expects a JavaScript statement or function. On mousing over the table row you're assigning the string 'black' to a variable called color. Since this variable is not related to the <tr> in any way it doesn't accomplish anything.
You can accomplish your goal instead with CSS.
tr:hover {
background-color: black;
}
If you absolutely had to do this programmatically, you could do something like this:
<template>
<tr
:style="{ backgroundColor: bgColor }"
@mouseover="bgColor = 'black'"
@mouseleave="bgColor = 'white'"
>
<td>table row content</td>
</tr>
</template>
<script>
export default {
data() {
return {
bgColor: 'white'
}
}
}
</script>
You'll need @mouseleave to do the opposite of @mouseenter to simulate a toggle effect. Also notice that the event names don't include the word "on". In Vue you omit that, so for example onclick is just @click
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论