时间戳

首页 > 解决方案 > 通过Vue js中的循环将鼠标悬停在特定项目上

javascript - 通过Vue js中的循环将鼠标悬停在特定项目上

问题描述

我想通过鼠标悬停将价格按钮替换为添加到购物车按钮。问题是每个项目上的真假数据触发器。当我在价格部分输入鼠标时如何指向特定项目。

这是代码： 模板：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div v-for='(item,index) in itemList' :key='index'  class="col-md-6 ">
            <img :src="require('../assets/img/'+item.itemImg)" class='itemImage6' alt="">
            <span class='itemSpan6'>{{item.title}}</span>
            <span class='itemSpanSecond6'>{{item.itemName}}</span>
            <div  @mouseenter='mouseEnter(index)' @mouseleave='mouseLeave(index)'>
             <span class='btn itemSpan' :id='item.productID' v-if='!add' > ${{item.itemValue}}</span>
            <span class='btn itemSapn' v-if='add' style='color:white;background:#b4a895;' ><i class="fas fa-plus"></i></span>
            </div>
            <div class="star_rating">
              <span  :id="item.productID+1" class='btn star' @click='fillstar(item.productID,1)'>&star;</span>
              <span  :id='item.productID+2' class='btn star' @click='fillstar(item.productID,2)'>&star;</span>
              <span  :id='item.productID+3' class='btn star' @click='fillstar(item.productID,3)'>&star;</span>
              <span  :id='item.productID+4' class='btn star' @click='fillstar(item.productID,4)'>&star;</span>
              <span  :id='item.productID+5' class='btn star' @click='fillstar(item.productID,5)'>&star;</span>
            </div> 
          </div>
</div>
</body>
</html>

方法：

   mouseEnter(id){
      this.itemList.map((item)=>{
        if(item.id == id){
          this.add=true;
        }
      });
    },
    mouseLeave(id){
      this.itemList.map((item)=>{
        if(item.id == id){
          this.add=false;
        }
      });
    }

标签： javascriptvue.js

解决方案

当你在 vue 中循环一个项目时，你可以将你的 id 保存在一个数据变量中。我不知道你的确切代码，所以我希望你可以使用这个例子。

<div v-for="(item, index) in itemList">
  <button @mouseleave="action = null"
          @mouseover="action = item.id"
 >
    hover button
 </button>
 <span v-show="action === item.id">Add to cart</span>
</div>
data() {
  return {
    action: null
  }
}

推荐阅读