Vue iView实现鼠标滑过变更图片

努力向码农爬的人

于 2020-06-10 22:34:37 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/wenqaq/article/details/106676680

本文介绍了如何使用Vue iView框架，结合@mouseover和@mouseout事件，实现在鼠标滑过卡片组件(Card)时动态变更图片的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue iView实现鼠标滑过变更图片

用的是@mouseover和 @mouseout来变更的还有iview的Card 卡片组件
在这里插入图片描述

<template>
  <Row class="rowItem">
    <Col span="8" v-for="(item,k) in gard1List" :key="k">
      <div @mouseover="ImgchangeOn(k)" @mouseout="ImgchangeOut(k)" class="test">
        <label class="colLabel">
          <img :src="item.active" class="imgItem" ref="we" />
        </label>
        <div class="colDiv">
          <p class="colDiv-title">{
  {item.title}}</p>
          <p class="co