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 回到顶部效果的实现代码
Feb 17 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
vue如何实现自定义底部菜单栏
Jul 01 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函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
JS跨域总结
2012/08/30 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
Python random模块的使用示例
2020/10/10 Python
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
数控专业推荐信范文
2013/12/02 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
保护黄河倡议书
2014/05/16 职场文书
实验心得体会
2014/09/05 职场文书
2014年财政工作总结
2014/12/10 职场文书
六一儿童节开幕词
2015/01/29 职场文书