快捷導(dǎo)航

vue中改變選中當(dāng)前項(xiàng)的顯示隱藏或者狀態(tài)的實(shí)現(xiàn)方法

更新時(shí)間：2018年02月08日 09:16:19 作者：luckylqh

下面小編就為大家分享一篇vue中改變選中當(dāng)前項(xiàng)的顯示隱藏或者狀態(tài)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

在vue中已經(jīng)不像jq那樣直接操作dom了，如果要指向當(dāng)前選中項(xiàng)時(shí)，就不能再用jq的思路來(lái)做了，方法如下：

當(dāng)指向一個(gè)狀態(tài)的時(shí)候，只讓指向的狀態(tài)隱藏，其他項(xiàng)不變，如果項(xiàng)目中用了element-ui，那么操作起來(lái)會(huì)比較簡(jiǎn)單一些，這樣設(shè)置：

v-if="(row.id == currentId&&row.auditState==0)?checkState:!checkState" @mouseover="statehidden(row.id)"

js中：

statehidden(id){
   this.currentId=id; 
  },

這種方法的思路是：鼠標(biāo)指向某一項(xiàng)時(shí)，獲取到某一項(xiàng)的id存在一個(gè)變量中，判斷row.id==currentId，控制這個(gè)按鈕顯示隱藏就可以了，因?yàn)橹挥性谑髽?biāo)指向某一項(xiàng)的時(shí)候才能拿到當(dāng)前項(xiàng)的id，所以可以利用row.id==currentId來(lái)判斷，這樣就能輕松實(shí)現(xiàn)控制當(dāng)前項(xiàng)的變化

以上這篇vue中改變選中當(dāng)前項(xiàng)的顯示隱藏或者狀態(tài)的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺談vuex之mutation和action的基本使用
本篇文章主要介紹了淺談vuex之mutation和action的基本使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
vue3使用svg圖標(biāo)的多種方式總結(jié)
svg圖片在項(xiàng)目中使用的非常廣泛,下面這篇文章主要給大家介紹了關(guān)于vue3使用svg圖標(biāo)的多種方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
vue 如何使用遞歸組件
這篇文章主要介紹了vue 如何使用遞歸組件，幫助大家更好的理解和使用vue，完成開(kāi)發(fā)需求，感興趣的朋友可以了解下
2020-10-10
vue-element-admin 菜單標(biāo)簽失效的解決方式
今天小編就為大家分享一篇vue-element-admin 菜單標(biāo)簽失效的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
vue中的el-form表單rule校驗(yàn)問(wèn)題(特殊字符、中文、數(shù)字等)
這篇文章主要介紹了vue中的el-form表單rule校驗(yàn)問(wèn)題(特殊字符、中文、數(shù)字等)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue路由對(duì)象屬性 .meta $route.matched詳解
今天小編就為大家分享一篇Vue路由對(duì)象屬性 .meta $route.matched詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
vue實(shí)現(xiàn)自定義樹(shù)形組件的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)自定義樹(shù)形組件的示例代碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-08-08
vue中添加語(yǔ)音播報(bào)功能的實(shí)現(xiàn)
本文主要介紹了vue中添加語(yǔ)音播報(bào)功能的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue3使用hooks解決字典數(shù)據(jù)的顯示問(wèn)題
我們?cè)谑褂?nbsp;element-plus的時(shí)候,經(jīng)常會(huì)使用一些字典數(shù)據(jù), 在搜索框的時(shí)候,字典數(shù)數(shù)要使用 el-select el-option 來(lái)顯示,但是經(jīng)常會(huì)遇到字典數(shù)據(jù)的顯示問(wèn)題,所以本文給大家介紹了Vue3使用hooks解決字典數(shù)據(jù)的顯示問(wèn)題,需要的朋友可以參考下
2024-12-12
vue中使用v-if,v-else來(lái)設(shè)置css樣式的步驟
我們?cè)谑褂胿ue項(xiàng)目開(kāi)發(fā)時(shí)，v-if是使用的非常多的，在這里我們談?wù)勅绾问褂胿-i來(lái)綁定修改css樣式，使用的主要是雙向數(shù)據(jù)綁定，即通過(guò)改變他的狀態(tài)來(lái)改變他的樣式，這篇文章主要介紹了vue中如何使用v-if,v-else來(lái)設(shè)置css樣式,需要的朋友可以參考下
2023-03-03