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 相关文章推荐
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 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打造属于自己的MVC框架
2012/03/07 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
python获取图片颜色信息的方法
2015/03/18 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
Python正则表达式常用函数总结
2017/06/24 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
学习python分支结构
2019/05/17 Python
Django框架反向解析操作详解
2019/11/28 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
2014年国庆节寄语
2014/09/19 职场文书
服务员态度差检讨书
2014/10/28 职场文书
2014年工商所工作总结
2014/12/09 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android