Vue鼠标悬浮切换图片

简介: Vue鼠标悬浮切换图片

HTML


<div id="app">
      <div class="content">
          <ul class="menu">
            <li v-bind:class="{focus:index==0}" @mouseover="choice(0)">不过如此</li>
          <li :class="{focus:index==1}" @mouseover="choice(1)">不过如此</li>
          <li :class="{focus:index==2}" @mouseover="choice(2)">不过如此</li>
          <li :class="{focus:index==3}" @mouseover="choice(3)">不过如此</li>
          </ul>
        <div class="item" v-if="index==0">
          <img src="img/微信图片_20201213134959.png" />
        </div>
        <div class="item" v-else-if="index==1">
          <img src="img/微信图片_202012131349591.png" />
        </div>
        <div class="item" v-else-if="index==2">
          <img src="img/微信图片_2020121313495910.jpg" />
        </div>
        <div class="item" v-else>
          <img src="img/微信图片_202012131349592.jpg" />
        </div>
      </div>
    </div>  


CSS


* {
        margin: 0;
        padding: 0;
      }
      
      .content {
        width: 800px;
        margin: 0 auto;
      }
      
      img {
        width: 800px;
      }
      
      ul {
        background-color: #FFE4C4;
      }
      
      li {
        list-style: none;
        overflow: hidden;
        width: 24%;
        text-align: center;
        display: inline-block;
        padding: 10px 0;
      }
      .focus {
        background-color: lightcoral;
        color: white;
      }  


JS


    new Vue({
        el: "#app",
        data: {
          index:0
        },
        methods: {
          choice:function(i) {
            this.index=i;   
          }
        },
      })


效果展示



笔记


使用鼠标移动事件@mouseover实现鼠标悬浮切换的效果


区别mouseover和mouseenter


我查了下:转载自简书的一个博主作者:前端王睿----原文

在原生JS中鼠标移入移出事件有四个,分别为mouseover ,mouseout ,mouseenter,mouseleave,其中mouseover和mouseenter为移入事件,mouseout和mouseleave为移出事件,那么问题来了,这每组事件之间究竟有什么区别呢?


可能很多人现在都还不知道它们之间的区别,甚至以为它们其实功能是一样一样的,真是too young too simple!


一、mouseover和mouseenter

mouseover: 只要鼠标指针移入事件所绑定的元素或其子元素,都会触发该事件

mouseenter: 只有鼠标指针移入事件所绑定的元素时,才会触发该事件


换句话说就是,如果一个元素没有子元素,那么该元素绑定mouseover或者mouseenter两种事件效果没有区别,鼠标每次移入元素时都只会触发一次事件;如果绑定了mouseover事件的元素存在子元素,那么,每次移入该元素时都会触发一次事件(包括从外部移入和从子元素移入),移入子元素时也会触发一次事件。

添加变量i

添加变量i

源代码链接

相关文章
|
1天前
|
JavaScript Java 测试技术
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
19 7
|
1天前
|
JSON JavaScript 前端开发
|
1天前
|
JavaScript 前端开发 Java
开发语言漫谈-Vue
Vue严格说来不是一门语言
|
3天前
|
JavaScript 前端开发 C++
【Vue】Vue快速入门、Vue常用指令、Vue的生命周期
【Vue】Vue快速入门、Vue常用指令、Vue的生命周期
13 2
|
5天前
|
存储 缓存 JavaScript
谈谈你对vue的了解
谈谈你对vue的了解
15 3
|
5天前
|
JavaScript API
Vue axjx 跨域请求
Vue应用中解决跨域问题可通过配置代理服务器。方法一是设置`devServer.proxy`到目标服务器端口,如`http://localhost:3000`,然后使用axios发送请求。方法二是为多个代理配置,如`/api`和`/api2`,分别指向不同端口,利用`pathRewrite`重写路径。请求时需加上相应前缀,如`/api/index`。
15 1
|
6天前
|
JavaScript 前端开发 Java
JavaSE精选-Vue
JavaSE精选-Vue
7 1
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
993 0
|
13天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
34 0
|
13天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了