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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
JavaScript实现简单轮播图效果
Dec 01 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四种定界符详解
2017/02/16 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
PHP 实现链式操作
2021/03/09 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
jQuery事件对象总结
2016/10/17 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
python跳出双层for循环的解决方法
2019/06/24 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
python实现简单井字棋小游戏
2020/03/05 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
python中count函数知识点浅析
2020/12/17 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
门卫工作岗位职责
2013/12/17 职场文书
现金出纳岗位职责
2014/03/15 职场文书
旷课检讨书500字
2014/10/14 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python
Mysql排序的特性详情
2021/11/01 MySQL