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 相关文章推荐
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
JavaScript严格模式详解
Jan 16 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
用webAPI实现图片放大镜效果
Nov 23 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
php使用cookie实现记住登录状态
2015/04/27 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
python实用代码片段收集贴
2015/06/03 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
pytorch数据预处理错误的解决
2020/02/20 Python
python实现学生成绩测评系统
2020/06/22 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
文案策划求职信
2014/03/18 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014年班组长工作总结
2014/11/20 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
单身证明格式样本
2015/06/15 职场文书