Question

嗨，大家好我刚刚在列表中学习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个列表项时，所有项目中的所有工具提示都显示..（当然）

您对如何解决此类样本有任何想法吗？

Answer 1

＆＃13;

console.clear()

new Vue({
  el: "#example-1",
  data:{
    items: [
      {name: "item one"},
      {name: "item two"},
      {name: "item three"}
    ],
    activeItem: null
  }
})

＆＃13;

li {cursor: pointer}

＆＃13;

<script src="https://unpkg.com/vue@2.4.2"></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>

＆＃13;

vuejs创建显示所有工具提示的工具提示

1 个答案: