最近在我自己的项目中，设计师让鼠标悬停在分类栏中改变图片，达到的效果大致是这样的：

这在jQuery中是一件非常简单的事情，但这是我在vue中的第一次实现。

首先，所有选择的图片覆盖在未选择的图片上

Html代码如下

Ul阿利./././img/goods/study . png ' alt=' learn ' img class=' hide _ tab ' src=' http 3360././img/goods/study _ A/Li href=' img src=' http :/././img/goods/life . png ' alt=' life ' img class=' hide _ tab ' src=' http 3360././img/goods/Life _ 1 . png ' alt=' Life '/a/Li href=' img src=' http :/././img/goods/sport . png ' alt=' sports ' img class=' hide _ tab ' src=' http :goods/sport _ 1 . png ' alt=' sports '/a/Li href=' img src=' http :/././img/goods/weather . png ' alt='服装师' img class=' hide _ tab ' src=' http 3360./img/goods/衣饰_1.png' alt='衣饰'/a/Li href=' img src=' http :/././img/goods/hat.png' alt='鞋帽' img class=' hide _ tab './img/goods/hat _ 1.png' alt='鞋帽'/a/Li href=' img src=' http :/./img/goods/food . png ' alt=' food ' img class=' hide _././img/goods/food _ 1 . png ' alt=' food '/a/Li href=' img src=' http :/./img/goods/other . png ' alt=' other ' img class=' hide _ tab ' src=' http :/././img/goods/other _ 1 . png ' alt=' other '/a/Li/ulcss代码如下。右{ float: leftul { margin-left : 1px；li { display:内联块；边距-left : 12px；宽度： 100 px；高度： 100像素；一个{ position:相对；display:内联块；宽度： 100 px；高度： 100像素；hide _ tab { position : absolute；bottom : 0；}}}}}其实是通过position:absolute简单布局的，现在所有选择了样式的图片都已经覆盖在没有选择样式的图片上了。

接下来，我们需要一个变量来控制它们的显示和隐藏。这个变量应该和每个分类一一对应，所以这个变量不应该是一个简单的布尔值，而是每个分类图片对应的一个数字。

我将这个变量定义为活动的，并在数据中声明它

Data(){ return{ active: 0 }}定义了另一种控制活动变量更改的方法

show active(index){ this . active=index；}方法中的index参数是鼠标悬停时传入的值

按如下方式修改html代码

保险商实验所阿利href=' ' @鼠标输入='显示活动(1)' @鼠标离开='显示活动(0)' img src=' http :/././img/goods/study.png' alt='学习img v-show=' active===1 ' class=' hide _ tab ' src=' http :/././img/goods/study_1.png' alt='学习/a /li阿利href=' ' @鼠标输入='显示活动(2)' @鼠标离开='显示活动(0)' img src=' http :/././img/goods/life.png' alt='生活img v-show=' active===2 ' class=' hide _ tab ' src=' http :/././img/goods/life_1.png' alt='生活/a /li阿利href=' ' @鼠标输入='显示活动(3)' @鼠标离开='显示活动(0)' img src=' http :/././img/goods/sport.png' alt='运动img v-show=' active===3 ' class=' hide _ tab ' src=' http :/././img/goods/sport_1.png' alt='运动/a /li阿利href=' ' @鼠标输入='显示活动(4)' @鼠标离开='显示活动(0)' img src=' http :/././img/货物/衣服。png' alt='服饰img v-show=' active===4 ' class=' hide _ tab ' src=' http :/././img/货物/衣服_ 1 . png“alt=”服饰/a /li阿利href=' ' @鼠标输入='显示活动(5)' @鼠标离开='显示活动(0)' img src=' http :/././img/goods/hat.png' alt='鞋帽img v-show=' active===5 ' class=' hide _ tab ' src=' http :/././img/goods/hat_1.png' alt='鞋帽/a /li阿利href=' ' @鼠标输入='显示活动(6)' @鼠标离开='显示活动(0)' img src=' http :/././img/goods/food.png' alt='食品img v-show=' active===6 ' class=' hide _ tab ' src=' http :/././img/goods/food_1.png' alt='食品/a /li阿利href=' ' @鼠标输入='显示活动(7)' @鼠标离开='显示活动(0)' img src=' http :/././img/goods/other.png' alt='其他img v-show=' active===7 ' class=' hide _ tab ' src=' http :/././img/goods/other_1.png' alt='其他/a /li /ul只有在当前指数和活跃的相等时，才会显示已选中分类的图片。

而鼠标离开时，传入一个没有与之对应的0,这样就没有显示了。

本文已被整理到了《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。