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 CSS选择器笔记
Mar 29 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
javascript中this指向详解
Apr 23 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
vant实现购物车功能
Jun 29 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
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异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
面包屑导航详解
2017/12/07 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
Python的gevent框架的入门教程
2015/04/29 Python
python访问类中docstring注释的实现方法
2015/05/04 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python单链表简单实现代码
2016/04/27 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
七一党建活动方案
2014/01/28 职场文书
自荐信如何制作?
2014/02/21 职场文书
小区文明倡议书
2014/05/16 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js