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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 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
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
js实现日期级联效果
2014/01/23 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
实例讲解python中的协程
2018/10/08 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
Html5定位终极解决方案
2020/02/05 HTML / CSS
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
电子商务毕业生求职信
2013/11/10 职场文书
一年级小学生评语
2014/04/22 职场文书
青春励志演讲稿
2014/04/29 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
三严三实学习心得体会
2014/10/13 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
公司出纳岗位职责
2015/03/31 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书