vue使用v-for实现hover点击效果


Posted in Javascript onSeptember 29, 2018

使用Vue来实现鼠标悬停效果。可以使用事件处理器v-on指令(简写为:@)来完成。为标签绑定mouseenter以及mouseleave事件即可。

hover是css中的选择器,用于选择鼠标指针浮动在上面的元素。所以a:hover可用于设置当鼠标悬停在超链接之上时超链接的样式。

在当今比较流行的前端框架里 vue react 都是以数据驱动的形式来修改元素的状态, 而并非是之前使用jq来操作dom元素, 这样效率也是非常低的, 像vue, react 都是以虚拟dom的形式渲染页面, 以数据的变化来更新虚拟dom, 从而更新页面.

vue使用v-for实现hover点击效果

jquery 来实现

1.给li来绑定hover事件

@mouseover="hover(index)"

2.在hover函数内去操作dom eq选中当前hover的li去修改它的样式, siblings()选中其他的li修改样式

hover: function(index){
  console.log(index);
  $('ul li').eq(index).css({
    'background': '#ccc',
    'color': '#fff'
  }).siblings().css({
    'background': '#fff',
    'color': '#333'
  })
}

vue 利用不同的class名来实现

首先写两个不同状态的样式

.hoverBg{
  background: #ccc;
  color: #fff;
}
.clickBg{
  background: red;
  color: #fff;
}

然后给两个状态绑定两个值

export default {
  data: function(){
    return {
      itemArr:['A','B','C','D'],
      hoverIndex: -1, //表示当前hover的是第几个li 初始为 -1 或 null 不能为0 0表示第一个li
      clickIndex: -1, //表示当前点击的是第几个li 初始为 -1 或 null 不能为0 0表示第一个li
    }
  },
}

hover的时候让hoverIndex等于hover的li,点击时候一样

@mouseover="hoverIndex = index"
@click="clickIndex = index"

鼠标移出又取消移出状态 即让hover的li为 -1 或 null

@mouseout="hoverIndex = -1"

然后利用 hoverIndex 和 clickIndex 来给li不同的class名 实现效果

:class="{'clickBg':index==clickIndex,'hoverBg':index==hoverIndex}"

用的熟练了就可以做出更多的东西,不同li渲染不同的样式

全部代码如下:

<template>
  <ul class="item">
    <li v-for="(item, index) in itemArr" :key="index"
      :class="{'clickBg':index==clickIndex,'hoverBg':index==hoverIndex}"
      @click="clickIndex = index"
      @mouseover="hoverIndex = index"
      @mouseout="hoverIndex = -1">
      {{item}}
    </li>
  </ul>
</template>

<script>
 export default {
   data: function(){
     return {
       itemArr:['A','B','C','D'],
       hoverIndex: -1, //表示当前hover的是第几个li 初始为 -1 或 null 不能为0 0表示第一个li
       clickIndex: -1, //表示当前点击的是第几个li 初始为 -1 或 null 不能为0 0表示第一个li
     }
   },
 }
</script>

<style>
 .item{
   width: 600px;
   height: 60px;
 }
 .item li{
   width: 80px;
   height: 60px;
   line-height: 60px;
   margin-left: 20px;
   float: left;
   text-align: center;
   cursor: pointer;
 }
 .hoverBg{
   background: #ccc;
   color: #fff;
 }
 .clickBg{
   background: red;
   color: #fff;
 }
</style>

总结

以上所述是小编给大家介绍的vue使用v-for实现hover点击效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 设置选中行的样式的实现代码
May 24 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
详解javascript遍历方式
Nov 11 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 #Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 #Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 #Javascript
iview同时验证多个表单问题总结
Sep 29 #Javascript
浅谈关于iview表单验证的问题
Sep 29 #Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 #Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 #Javascript
You might like
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
php简单截取字符串代码示例
2016/10/19 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
深入源码解析Python中的对象与类型
2015/12/11 Python
详解Python中for循环是如何工作的
2017/06/30 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
Python reques接口测试框架实现代码
2020/07/28 Python
Python爬虫教程知识点总结
2020/10/19 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
学生自我评价范文
2014/02/02 职场文书
草房子读书笔记
2015/06/29 职场文书
物业公司管理制度
2015/08/05 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript