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实用小函数使用介绍
Nov 11 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
JS动态显示倒计时效果
Dec 12 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版
2012/04/20 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
jQuery 自定义函数写法分享
2012/03/30 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
Javascript中replace()小结
2015/09/30 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
js实现微信聊天界面
2020/08/09 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
详解Python中用于计算指数的exp()方法
2015/05/14 Python
理解python中生成器用法
2017/12/20 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
干部作风建设工作总结
2014/10/29 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
大学生党课感想
2015/08/11 职场文书
党员反邪教心得体会
2016/01/15 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis