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 parseInt() 函数的进制转换注意细节
Jan 08 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
html实现随机点名器的示例代码
Apr 02 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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简单实现数组分页的方法
2016/04/30 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
javascript实现时钟动画
2020/12/03 Javascript
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
django2笔记之路由path语法的实现
2019/07/17 Python
python调用支付宝支付接口流程
2019/08/15 Python
Python sep参数使用方法详解
2020/02/12 Python
Python类中self参数用法详解
2020/02/13 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
十一酒店活动方案
2014/02/20 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
高中运动会广播稿
2015/08/19 职场文书
《包身工》教学反思
2016/02/23 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android