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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
PHP优于Node.js的五大理由分享
2012/09/15 PHP
PHP 错误处理机制
2015/07/06 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
js window.event对象详尽解析
2009/02/17 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
python fabric实现远程部署
2017/01/05 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Python适配器模式代码实现解析
2019/08/02 Python
python虚拟环境完美部署教程
2019/08/06 Python
python实现快递价格查询系统
2020/03/03 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
团日活动总结
2014/04/28 职场文书
实习推荐信
2014/05/10 职场文书
科技工作者先进事迹
2014/08/16 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
班主任寄语2015
2015/02/26 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers