vue中改变选中当前项的显示隐藏或者状态的实现方法

 更新时间:2018年02月08日 09:16:19   作者:luckylqh  
下面小编就为大家分享一篇vue中改变选中当前项的显示隐藏或者状态的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在vue中已经不像jq那样直接操作dom了,如果要指向当前选中项时,就不能再用jq的思路来做了,方法如下:

当指向一个状态的时候,只让指向的状态隐藏,其他项不变,如果项目中用了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中改变选中当前项的显示隐藏或者状态的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 浅谈vuex之mutation和action的基本使用

    浅谈vuex之mutation和action的基本使用

    本篇文章主要介绍了浅谈vuex之mutation和action的基本使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue3使用svg图标的多种方式总结

    vue3使用svg图标的多种方式总结

    svg图片在项目中使用的非常广泛,下面这篇文章主要给大家介绍了关于vue3使用svg图标的多种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • vue 如何使用递归组件

    vue 如何使用递归组件

    这篇文章主要介绍了vue 如何使用递归组件,帮助大家更好的理解和使用vue,完成开发需求,感兴趣的朋友可以了解下
    2020-10-10
  • vue-element-admin 菜单标签失效的解决方式

    vue-element-admin 菜单标签失效的解决方式

    今天小编就为大家分享一篇vue-element-admin 菜单标签失效的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue中的el-form表单rule校验问题(特殊字符、中文、数字等)

    vue中的el-form表单rule校验问题(特殊字符、中文、数字等)

    这篇文章主要介绍了vue中的el-form表单rule校验问题(特殊字符、中文、数字等),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue路由对象属性 .meta $route.matched详解

    Vue路由对象属性 .meta $route.matched详解

    今天小编就为大家分享一篇Vue路由对象属性 .meta $route.matched详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue实现自定义树形组件的示例代码

    vue实现自定义树形组件的示例代码

    这篇文章主要介绍了vue实现自定义树形组件的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • vue中添加语音播报功能的实现

    vue中添加语音播报功能的实现

    本文主要介绍了vue中添加语音播报功能的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue3使用hooks解决字典数据的显示问题

    Vue3使用hooks解决字典数据的显示问题

    我们在使用 element-plus的时候,经常会使用一些字典数据, 在搜索框的时候,字典数数要使用 el-select el-option 来显示,但是经常会遇到字典数据的显示问题,所以本文给大家介绍了Vue3使用hooks解决字典数据的显示问题,需要的朋友可以参考下
    2024-12-12
  • vue中使用v-if,v-else来设置css样式的步骤

    vue中使用v-if,v-else来设置css样式的步骤

    我们在使用vue项目开发时,v-if是使用的非常多的,在这里我们谈谈如何使用v-i来绑定修改css样式,使用的主要是双向数据绑定,即通过改变他的状态来改变他的样式,这篇文章主要介绍了vue中如何使用v-if,v-else来设置css样式,需要的朋友可以参考下
    2023-03-03

最新评论