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 相关文章推荐
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
javascript事件冒泡实例分析
May 13 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
Webpack的Loader和Plugin的区别
Nov 09 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 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 登录记住密码实现思路
2013/05/07 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
python中执行shell命令的几个方法小结
2014/09/18 Python
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
广告设计专业自荐信范文
2013/11/14 职场文书
减负增效提质方案
2014/05/23 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
入股合作协议书
2014/10/12 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
导游词之山西-五老峰
2019/10/07 职场文书