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 相关文章推荐
jquery插件之easing 动态菜单
Aug 21 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 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
分享10段PHP常用代码
2015/11/11 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
python list转dict示例分享
2014/01/28 Python
python3.3实现乘法表示例
2014/02/07 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
超简单使用Python换脸实例
2019/03/27 Python
python tornado修改log输出方式
2019/11/18 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
python实现3D地图可视化
2020/03/25 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
质量工程师岗位职责
2013/11/16 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
应届毕业生自荐书
2014/06/18 职场文书
欢迎标语大全
2014/06/21 职场文书
500字作文之难忘的同学
2019/12/20 职场文书