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查看html源文件
Nov 08 Javascript
简明json介绍
Sep 28 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
js实现网页随机验证码
Oct 19 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 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开发者的10个技巧
2011/02/25 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
php中JSON的使用与转换
2015/01/14 PHP
PHP实现懒加载的方法
2015/03/07 PHP
Javascript之文件操作
2007/03/07 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
监听element-ui table滚动事件的方法
2019/03/26 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python函数返回值实例分析
2015/06/08 Python
python 日期操作类代码
2018/05/05 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
Django学习之文件上传与下载
2019/10/06 Python
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
学生实习推荐信范文
2013/11/26 职场文书
企业口号大全
2014/06/12 职场文书
2014年平安夜寄语
2014/12/08 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
物业接待员岗位职责
2015/04/15 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
早上好问候语大全
2015/11/10 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js