一个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]"之类的表达式就可以 但是如果我们要为一个循环列表按 ...
随机推荐
- Datatables js 复杂表头 合并单元格
x →Datatables官网← x 项目中用到的Table都是用Datatables插件来搞得: 以前都是生成一般性的table: 近期要生成一些复杂表头,合并单元格之类的: 研究了一下. x 去官 ...
- autofac生命周期入门(如何避免内存泄漏)
如果你是一个IOC新手,那么生命周期可能会比较难以理解.以至于谈到这个问题时,一些老手也时常表示疑虑和害怕.一个令人不安的问题就是-对象没有在合适的时机被销毁.这样一来内存的使用率就会一直攀升,直到程 ...
- 1.7Oob 继承关系中构造方法的使用
1:父类中最好要有一个空参数的构造方法,因为默认的构造方法在自定义了构造方法后就不存在了,需要显示的写出来. 若父类中没有空参数的构造方法,则子类必须有自定义的构造方法,且用super()调用父类的构 ...
- SCSS快速入门
SCSS快速入门 1. 使用变量sass引入了变量.通过变量名来引用它们,使用$符号来标识变量.且在CSS中并无他用,不会导致与现存或未来的css语法冲突. 1-1. 变量声明sass变量的声明和cs ...
- [daily] pandoc
学了LaTeX之后,你就会很自然的接触的另一种观点: LaTeX是专注于排版的,你需要专注于内容. 于是,请使用pandoc. 简单的说, pandoc就是可以将各种个样格式的文档转换成各种各样格式的 ...
- LeetCode 485 Max Consecutive Ones 解题报告
题目要求 Given a binary array, find the maximum number of consecutive 1s in this array. 题目分析及思路 给定一个01数组 ...
- 重读《深入理解Java虚拟机》四、虚拟机如何加载Class文件
1.Java语言的特性 Java代码经过编译器编译成Class文件(字节码)后,就需要虚拟机将其加载到内存里面执行字节码所定义的代码实现程序开发设定的功能. Java语言中类型的加载.连接(验证.准备 ...
- finecms同时调用子栏目和子栏目的文章怎么操作
之前ytkah写过dedecms如何调用当前栏目的子栏目及子栏目文章,那如果是finecms如何同时调用子栏目和子栏目的文章呢? {list action=category pid=0 id=31} ...
- arcgis api for javascript 距离与面积量算
在之前的实验中,距离量算跟面积量算一直出问题,费了非常长的时间,各种调式找不到原因. 如今成功完毕.与君共勉 1.距离量算中 lengthParams.polylines = [geom ...
- python的第三方库
python的第三方库 https://www.lfd.uci.edu/~gohlke/pythonlibs/