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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
js+cavans实现图片滑块验证
Sep 29 Javascript
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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
js输出列表实现代码
2010/09/12 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
vue实现图片上传功能
2020/05/28 Javascript
python命令行参数sys.argv使用示例
2014/01/28 Python
Python isinstance函数介绍
2015/04/14 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
python中的unittest框架实例详解
2021/02/05 Python
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
医学护理毕业生自荐信
2013/11/07 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
2014年医院工作总结
2014/11/20 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers