Vue.js vuejs创建显示所有工具提示的工具提示

大家好，我正在学习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>

盘旋我
{{item.name}

我在数据中设置了

tooltipActive:false

。问题是当我将鼠标悬停在1个列表项上时，所有项中的所有工具提示都会显示。。（当然）

你知道如何解决这类问题吗？

console.clear（）
新Vue({
el:“示例1”，
数据：{
项目：[
{name:“第一项”}，
{名称：“项目二”}，
{名称：“项目三”}
],
activeItem:空
}
})

li{光标：指针}

盘旋我
{{item.name}

啊，有道理！谢谢你，伯特！顺便问一下，这是一种正确的vuejs思维方式吗？（因为老实说，我更喜欢jquery编码，而且我看到我的方法是如此的jquery）@bondythegreat这绝对是一种vue风格的方法；UI由状态驱动。