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 页面输出值
Nov 30 Javascript
javascript 精粹笔记
May 09 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
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 miniBB中文乱码问题解决方法
2008/11/25 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
php异常处理捕获错误整理
2019/09/23 PHP
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
vue中过滤器filter的讲解
2019/01/21 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
python实现手机通讯录搜索功能
2018/02/22 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
Python实现常见的回文字符串算法
2018/11/14 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
css3高级选择器使用方法
2013/12/02 HTML / CSS
解除同居协议书
2015/01/29 职场文书
电影复兴之路观后感
2015/06/02 职场文书
党小组意见范文
2015/06/08 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
python双向链表实例详解
2022/05/25 Python