一个vue的循环列表,里面的按钮的移入事件
需求:移入的时候,互相关注变成取消关注
移入移出事件传参$event,把这个参数打印出来看就可以搞定,而不是移入的时候,文本都改变,只改变当前行 的文本

<p @mouseover="over($event)" @mouseout="out($event)">互相关注</p>
out (t) {
t.target.innerText = '互相关注'
},
over (t) {
console.log(t, 1)
console.log(t.target.innerText, 1)
t.target.innerText = '取消关注'
},
不能这么写,这么写的话ie10点击取消关注会卡死,应为mouseover有冒泡,这里应该用mouseenter只在当前,不用event
****************************************************************************************************
****************************************************************************************************
最好这么写
<p class="focus-span" v-if="item.concernStatus==2" @click="focusTogether(item.userId)" @mouseenter="over" @mouseleave="out">{{msg}}</p>
data里面
msg:'互相关注'
out () {
this.msg = '互相关注'
},
over () {
this.msg = '取消关注'
},
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout;相当于有冒泡
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave
这样的话,mouseenter子元素不会反复触发事件,否则在IE中经常有闪烁情况发生。这就时为啥ie兼容的时候要卡死
一个vue的循环列表,里面的按钮的移入事件的更多相关文章
- 做一个vue的todolist列表
<template> <div id="app"> <input type="text" v-model="todo&q ...
- vue处理循环列表动态数据问题
调用方法:Vue.set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值 <!DOCTYPE ...
- 一个 Vue 的滑动按钮组件
git 地址:https://github.com/SyMind/vue-sliding-button vue-better-slider 一个 Vue 的滑动按钮组件,有关滑动方面的处理借鉴 bet ...
- vue.js循环for(列表渲染)详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
- 微信小程序循环列表点击每一个单独添加动画
首先,咱们看一下微信小程序动画怎么实现,我首先想到的是anime.js,但是引入之后用不了,微信小程序内的css也无法做到循环的动态,我就去找官方文档看看有没有相应的方法,哎,还真有 点击这里查看 微 ...
- 第 2 篇:上手 Vue 展示 todo 列表
作者:HelloGitHub-追梦人物 追梦人物的 Vue 系列教程在他的博客已经全部更新完成,地址: https://www.zmrenwu.com/courses/vue2x-todo-tutor ...
- Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用
本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...
- 3-7 Vue中的列表渲染
举个案例:循环data中的list的值在div中,并显示相应的index值. 关于数组的循环: //显示效果如下图: //一般的列表渲染最好带一个key值,要把key值设置为唯一值的话,可以选择in ...
- vue 之循环添加不同class
在vue中按条件为class动态添加直接使用:class="[{ active: isActive }, errorClass]"之类的表达式就可以 但是如果我们要为一个循环列表按 ...
随机推荐
- 在powerDesigner中通过SQL生成pdm
在项目需求分析的阶段,通常需要画数据库表的pdm图.有时候会直接画pdm来设计表,有时候是通过其他方式,如用纸和笔去画……当数据库中的表已经建立好了,怎么把数据库中的表导成SQL形式,然后生成pdm图 ...
- 质量团队在VUCA时代如何走?
如今,VUCA时代已到来.在VUCA时代(易变性volatility.不确定性uncertainty.复杂性complexity.模糊性ambiguity),面对外部环境的复杂和不确定性,测试圈是否已 ...
- ML.NET教程之出租车车费预测(回归问题)
理解问题 出租车的车费不仅与距离有关,还涉及乘客数量,是否使用信用卡等因素(这是的出租车是指纽约市的).所以并不是一个简单的一元方程问题. 准备数据 建立一控制台应用程序工程,新建Data文件夹,在其 ...
- 快速排序中的partition.
经典快速排序中的partition, 将最后一个元素作为划分点. 维护两个区域. <= x 的, >x 的区域. 划分过程中还有个待定的区域. [L,less] 区域小于x, [less+ ...
- POJ 1179 - Polygon - [区间DP]
题目链接:http://poj.org/problem?id=1179 Time Limit: 1000MS Memory Limit: 10000K Description Polygon is a ...
- [No0000146]深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing)理解堆与栈3/4
前言 虽然在.Net Framework 中我们不必考虑内在管理和垃圾回收(GC),但是为了优化应用程序性能我们始终需要了解内存管理和垃圾回收(GC).另外,了解内存管理可以帮助我们理解在每一个程 ...
- Signing for "XXXX" requires a development team.
[iOS]Signing for requires a development team. Select a development team in the project editor. Code ...
- iOS只给矩形两个边加圆角
- (void)updataTopCornerRadius { CGRect clipRect = CGRectMake(, , self.headPhotoIv.width, self.headPh ...
- SQLAlchemy中时间格式化及将时间戳转成对应时间的方法-mysql
https://blog.csdn.net/guoqianqian5812/article/details/80175866 方法很简答,都是借助于mysql数据库提供的函数将时间格式化方法 func ...
- Python接口自动化【requests处理Token请求】
首先说一下使用python模拟登录或注册时,对于带token的页面怎么登录注册模拟的思路: 1.对于带token的页面,需要先从最开始的页面获取合法token 2.然后使用获取到的合法token进行后 ...