大家好，我只是学习vuejs及其列表中的事件。我想知道如何显示/隐藏组件（在此示例中为div）作为工具提示？
我做到了
<ul id="example-1">
<li v-for="item in items">
<div v-on:mouseover="tooltipActive = !tooltipActive">hover me</div>
<div class="tooltip" v-if="tooltipActive">{{ item.name }}</div>
</li>
</ul>
我设置tooltipActive: false数据。问题是当我将鼠标悬停在1个列表项上时，所有项目中的所有工具提示都将显示..（当然）
您对如何解决此类样本有任何想法吗？
console.clear()
new Vue({
el: "#example-1",
data:{
items: [
{name: "item one"},
{name: "item two"},
{name: "item three"}
],
activeItem: null
}
})li {cursor: pointer}<script src="https://unpkg.com/[email protected]"></script>
<ul id="example-1">
<li v-for="item in items">
<div v-on:mouseover="activeItem = item"
v-on:mouseout="activeItem = null">
hover me
</div>
<div class="tooltip" v-if="activeItem === item">{{ item.name }}</div>
</li>
</ul>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句