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中改变选中当前项的显示隐藏或者状态的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue实现动态显示与隐藏底部导航的方法分析

    本文实例讲述了vue实现动态显示与隐藏底部导航的方法.分享给大家供大家参考,具体如下: 在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的,这里列举一下页面底部导航的显示与隐藏的两种方式: 方式一: 1. 路由配置meta: {footShow: true, }, routes: [ { path: '/', name: 'home', redirect: '/home', // 默认路由添加class component: home, meta: { footS

  • Vue.js 点击按钮显示/隐藏内容的实例代码

    实例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <d

  • elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)

    在做后台管理系统中遇到一个需求, 点击一个按钮可以变换里面字的内容 当状态为显示的时候, 该行第一个按钮为隐藏; 当状态为隐藏的时候, 该行第一个按钮为显示; 具体代码如下: <!-- 数据表格 --> <el-table :data="tableData" class="table" stripe border v-loading="loading"> <el-table-column type="ind

  • vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法

    最近利用vue第三方UI MuseUI开发webapp,然后在导航栏这里出现了问题,我需要在导航栏上的几个路由上显示底部导航栏,在其他路由上不显示,就这个问题,MuseUI的底部导航栏直接加载在app.vue里面,会每个页面都有导航栏,所以这种方式不可行,后来我真的使出了浑身解数,去MuseUI作者GitHub上面提问,无果,去segmentfault上面提问,无果,去vue官方群提问,无果,在提问之前,我都是经过一番搜索,思考的,但是这些都让我崩溃了.可能出错的地方从路由URL,museUI的

  • vue-router实现编程式导航的代码实例

    vue-router实现编程式导航的代码实例

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现.即:通过js动态的进行导航链接. 一.this.$router.push( ) router.push(location, onComplete?, onAbort?) 注意:在 Vue 实例内部,你可以通过 $router 访问路由实例.因此你可以调用 this.$router.push. 想要导航到不同的 URL,则使用 router.push 方法.这个方法会

  • vue.js 左侧二级菜单显示与隐藏切换的实例代码

    废话不多说了,直接给大家贴代码了, 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style type

  • vueJS简单的点击显示与隐藏的效果【实现代码】

    目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性,感觉v-if好 感觉跟适合. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if.v-else.v-show&l

  • VUE元素的隐藏和显示（v-show指令)

    VUE元素的隐藏和显示（v-show指令)

    除了click单击事件,还有mouseover,mouseover等鼠标事件. dbclick双击事件. v-on:click/mouseover/mouseover/mousedown/dbclick/... v-show指令 v-show="true/false" //控制元素显示/隐藏 示例代码: <!DOCTYPE html> <html> <head> <title></title> <meta charset

  • vue实现密码显示隐藏切换功能

    先给大家分享效果图: 具体实现代码如下所示: html: <group> <span>设置密码</span> <x-input :type="this.registration_data.pwdType" placeholder="请填写密码" @on-change="password"></x-input> <img :src="this.registration_da

  • vue.js使用v-if实现显示与隐藏功能示例

    vue.js使用v-if实现显示与隐藏功能示例

    本文实例讲述了vue.js使用v-if实现显示与隐藏功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1

  • Vue隐藏显示、只读实例代码

    1.Vue隐藏显示 <div style="padding-top:5px;" v-bind:class="{hidden: isHidden }"> <label class="inline"> <input id="id-button-borders" checked="" v-model="user.userstate" type="chec

  • vue组件实现弹出框点击显示隐藏效果

    本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被弹出框覆盖了.所以只能在弹出页面点击取消实现关闭隐藏弹出框.这样就需要写两个点击事件,但是两个点击事件就会有冲突,需要点击两下才能使弹出框显示和隐藏.然后我就用的以下方法,希望可以帮到大家!!! 代码如下 1.在当前页面中(

随机推荐