vue中改变选中当前项的显示隐藏或者状态的实现方法


Posted in Javascript onFebruary 08, 2018

在vue中已经不像jq那样直接操作dom了,如果要指向当前选中项时,就不能再用jq的思路来做了,方法如下:

vue中改变选中当前项的显示隐藏或者状态的实现方法

当指向一个状态的时候,只让指向的状态隐藏,其他项不变,如果项目中用了element-ui,那么操作起来会比较简单一些,这样设置:

v-if="(row.id == currentId&&row.auditState==0)?checkState:!checkState" @mouseover="statehidden(row.id)"

js中:

statehidden(id){
   this.currentId=id; 
  },

这种方法的思路是:鼠标指向某一项时,获取到某一项的id存在一个变量中,判断row.id==currentId,控制这个按钮显示隐藏就可以了,因为只有在鼠标指向某一项的时候才能拿到当前项的id,所以可以利用row.id==currentId来判断,这样就能轻松实现控制当前项的变化

以上这篇vue中改变选中当前项的显示隐藏或者状态的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
ExtJS 入门
Oct 29 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
Dec 19 Vue.js
Ionic学习日记实现验证码倒计时
Feb 08 #Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 #Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 #Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 #Javascript
Vue组件通信的四种方式汇总
Feb 08 #Javascript
Vue Socket.io源码解读
Feb 07 #Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 #Javascript
You might like
PHP4实际应用经验篇(8)
2006/10/09 PHP
PHP生成静态页
2006/11/25 PHP
php 使用array函数实现分页
2015/02/13 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
JavaScript日历实现代码
2010/09/12 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
浅谈JavaScript中null和undefined
2015/07/09 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
捕获未处理的Promise错误方法
2017/10/13 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
社区优秀志愿者材料
2014/02/02 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
党员民主评议个人总结
2014/10/20 职场文书
入党申请书格式
2019/06/20 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏