代码之家  ›  专栏  ›  技术社区  ›  bondythegreat

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

  •  2
  • bondythegreat  · 技术社区  · 7 年前

    我想知道如何将组件(在本例中为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 回复  |  直到 7 年前
        1
  •  3
  •   Bert Jeffrey Shen    7 年前

    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/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>