2017年05月17日Vue.js实现鼠标悬浮更换图片功能

Vue.js鼠标悬停以替换图片功能

更新时间：2017年5月17日14:02:08作者：HaiJing1995

本文主要介绍Vue.js，以实现通过鼠标浮动来更改图片的功能。它具有一定的参考价值，有兴趣的朋友可以参考。

在我最近做的一个项目中，设计人员要求将鼠标悬停在类别栏中以替换图片，并且大致实现的效果是这样的：

这在jQuery中非常简单，但这是我第一次在vue中实现它。

首先，所有选中的图片都会被覆盖在未选中的图片上

html代码如下

css代码如下

.right {
 float: left;
 ul {
 margin-left: 1px;
 li {
  display: inline-block;
  margin-left: 12px;
  width: 100px;
  height: 100px;
  a{
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  .hide_tab{
  position: absolute;
  bottom: 0;
  }
  }
 }
 }
 }

实际上，布局通过位置非常简单：绝对，现在所选样式的图片都已覆盖在未选择样式的图片上。

接下来，我们需要一个变量来控制它们的显示和隐藏。此变量应与每个类别一一对应，然后此变量不应为简单的布尔值，而应为一个数字，以与每个类别的图片相对应。

我将此变量定义为活动变量并在数据中声明

data(){
 return{
 active: 0
 }
}

定义另一种方法来控制活动变量的变化

showActive(index) {
 this.active = index;
}

该方法中的index参数是鼠标悬停时传递的值

按如下所示修改html代码

仅当当前索引和活动索引相等时，才会显示所选类别的图像。

当鼠标离开时，传入与它不对应的0，这样就不会显示它。

本文已编入“ Vue.js前端组件学习教程”，欢迎大家学习和阅读。

有关vue.js组件的教程，请单击主题vue.js组件学习教程进行学习。

以上是本文的全部内容。我希望它对每个人的学习都有帮助，也希望您能更多地支持Scripthome。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-378605-1.html