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访问XML数据的实例
Dec 27 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 Javascript
JavaScript 实现页面滚动动画
Apr 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
各种快递查询--Api接口
2016/04/26 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
python自动化测试之连接几组测试包实例
2014/09/28 Python
python读取oracle函数返回值
2016/07/18 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
Python dict的常用方法示例代码
2020/06/23 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
什么是Remote Module
2016/06/10 面试题
市场营销调查计划书
2014/05/02 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
文明社区申报材料
2014/08/21 职场文书
暑期培训班招生方案
2014/08/26 职场文书
入党函调证明材料
2014/12/24 职场文书
丧事答谢词
2015/01/05 职场文书
安全承诺书
2015/01/19 职场文书
教学质量月活动总结
2015/05/11 职场文书