需求:移入的时候,互相关注变成取消关注

移入移出事件传参$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的循环列表,里面的按钮的移入事件的更多相关文章

  1. 做一个vue的todolist列表

    <template> <div id="app"> <input type="text" v-model="todo&q ...

  2. vue处理循环列表动态数据问题

    调用方法:Vue.set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值 <!DOCTYPE ...

  3. 一个 Vue 的滑动按钮组件

    git 地址:https://github.com/SyMind/vue-sliding-button vue-better-slider 一个 Vue 的滑动按钮组件,有关滑动方面的处理借鉴 bet ...

  4. vue.js循环for(列表渲染)详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  5. 微信小程序循环列表点击每一个单独添加动画

    首先,咱们看一下微信小程序动画怎么实现,我首先想到的是anime.js,但是引入之后用不了,微信小程序内的css也无法做到循环的动态,我就去找官方文档看看有没有相应的方法,哎,还真有 点击这里查看 微 ...

  6. 第 2 篇:上手 Vue 展示 todo 列表

    作者:HelloGitHub-追梦人物 追梦人物的 Vue 系列教程在他的博客已经全部更新完成,地址: https://www.zmrenwu.com/courses/vue2x-todo-tutor ...

  7. Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用

    本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...

  8. 3-7 Vue中的列表渲染

     举个案例:循环data中的list的值在div中,并显示相应的index值. 关于数组的循环: //显示效果如下图: //一般的列表渲染最好带一个key值,要把key值设置为唯一值的话,可以选择in ...

  9. vue 之循环添加不同class

    在vue中按条件为class动态添加直接使用:class="[{ active: isActive }, errorClass]"之类的表达式就可以 但是如果我们要为一个循环列表按 ...

随机推荐

  1. python的代码缩进和冒号

    一般语言一样采用{}或者begin...end分隔代码块,而是python中,采用代码缩进和冒号来区分代码之间的层次. 缩进的空白数量是可变的,但是所有代码块语句必须包含相同的缩进空白数量,这个必须严 ...

  2. vm tools安装linux ubuntu和主机不能复制

    点击图中的安装vm tools ,因为我的已经安装过了,所以显示的是重新安装. 点击以后会出来一个虚拟光驱,打开虚拟光驱,复制出来 vm toolsxxx.tar.gz  文件建立一个临时文件夹,复制 ...

  3. PHP之后期静态绑定

    PHP后期静态绑定的(late static bindings) 理解PHP延迟静态绑定 static::中的static其实是运行时所在类的别名,并不是定义类时所在的那个类名.这个东西可以实现在父类 ...

  4. mac下安装debug坑

    mac默认情况下的php版本是很低的,当你直接用phpize的时候默认是使用mac默认安装的phpize版本,这个时候查看Phpinfo的时候是看不到xdebug的,这时候查看错误日志会收到这样的报错 ...

  5. Oracle shrink table

    shrink必须开启行迁移功能. alter table table_name enable row movement ; 在oracle中可以使用alter table table_name shr ...

  6. 如何将第三方jar包上传到Nexus私服

    首先登陆私服服务器         以动力威视私服为例:          自己搭建的私服地址:http://192.168.1.5:8081/nexus/index.html#view-reposi ...

  7. eclipse背景色设置成护眼色(豆沙绿)

    1.点击windows -->preferences 2.展开Editors 3.选择自定义颜色 4.把色调调成:85 饱和度调成:123 亮度调成205 即可调成豆沙绿色了 然后点确定.

  8. Nor Flash 驱动框架

    框架入口源文件: lcd.c (可根据入口源文件,再按着框架到内核走一遍) 内核版本:linux_2.6.22.6      硬件平台:JZ2440 以下是驱动框架: 以下是驱动代码 s3c_nor_ ...

  9. 网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容如下:

    页头:header  如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法登录条:loginBar         标志:logo      ...

  10. Recover InnoDB dictionary

    为什么我们需要恢复innodb的字典信息?当我们drop 一个表时,发现误操作,这时又没有备份,那么想恢复数据是非常困难的.所以我们想恢复被删除的表时,首先就需要恢复表结构,目前已经有了undrop- ...