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 相关文章推荐
浅谈javascript的原型继承
Jul 25 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
JavaScript实现点击切换功能
Jan 27 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
关于PHP实现异步操作的研究
2013/02/03 PHP
php生成gif动画的方法
2015/11/05 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
JS与框架页的操作代码
2010/01/17 Javascript
javascript打印输出json实例
2013/11/11 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
python连接池实现示例程序
2013/11/26 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
python读写LMDB文件的方法
2018/07/02 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
Django-migrate报错问题解决方案
2020/04/21 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
办公室年终个人自我评价
2013/10/28 职场文书
金融专业个人求职信范文
2013/11/28 职场文书
入股协议书范本
2014/04/14 职场文书
关于环保的建议书
2014/05/12 职场文书
学习型党组织心得体会
2014/09/12 职场文书
三下乡个人总结
2015/03/04 职场文书
婚庆答谢词大全
2015/09/29 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python