vue中改變選中當(dāng)前項(xiàng)的顯示隱藏或者狀態(tài)的實(shí)現(xiàn)方法
在vue中已經(jīng)不像jq那樣直接操作dom了，如果要指向當(dāng)前選中項(xiàng)時(shí)，就不能再用jq的思路來做了，方法如下：
當(dāng)指向一個(gè)狀態(tài)的時(shí)候，只讓指向的狀態(tài)隱藏，其他項(xiàng)不變，如果項(xiàng)目中用了element-ui，那么操作起來會比較簡單一些，這樣設(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來判斷，這樣就能輕松實(shí)現(xiàn)控制當(dāng)前項(xiàng)的變化
以上這篇vue中改變選中當(dāng)前項(xiàng)的顯示隱藏或者狀態(tài)的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- vue.js 底部導(dǎo)航欄 一級路由顯示 子路由不顯示的解決方法
- VUE元素的隱藏和顯示（v-show指令)
- vueJS簡單的點(diǎn)擊顯示與隱藏的效果【實(shí)現(xiàn)代碼】
- vue.js 左側(cè)二級菜單顯示與隱藏切換的實(shí)例代碼
- vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏效果
- vue實(shí)現(xiàn)密碼顯示隱藏切換功能
- elementUI Vue 單個(gè)按鈕顯示和隱藏的變換功能(兩種方法)
- Vue.js 點(diǎn)擊按鈕顯示/隱藏內(nèi)容的實(shí)例代碼
- vue.js使用v-if實(shí)現(xiàn)顯示與隱藏功能示例
- Vue隱藏顯示、只讀實(shí)例代碼
- vue-router實(shí)現(xiàn)編程式導(dǎo)航的代碼實(shí)例
- vue實(shí)現(xiàn)動(dòng)態(tài)顯示與隱藏底部導(dǎo)航的方法分析
相關(guān)文章
詳解element-ui 組件el-autocomplete使用踩坑記錄
最近使用了el-autocomplete組件，本文主要介紹了element-ui 組件el-autocomplete使用踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue可ctrl,shift多選,可添加標(biāo)記日歷組件詳細(xì)
這篇文章主要介紹了vue可ctrl,shift多選,可添加標(biāo)記日歷組件詳細(xì)，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
Vue實(shí)現(xiàn)自定義視頻和圖片上傳的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何通過Vue實(shí)現(xiàn)自定義視頻和圖片上傳的功能，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-04-04
Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作示例詳解
在 Vue.js 或其他類似框架中，使用 onMounted 是為了確保在組件掛載后執(zhí)行異步操作，這篇文章主要介紹了Vue使用onMounted確保在組件掛載后執(zhí)行異步操作,需要的朋友可以參考下2023-06-06
本篇文章主要介紹了詳解前后端分離之VueJS前端，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
詳解基于Vue-cli搭建的項(xiàng)目如何和后臺交互
這篇文章主要介紹了詳解基于Vue-cli搭建的項(xiàng)目如何和后臺交互，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果完整實(shí)例
在實(shí)際項(xiàng)目開發(fā)中,我們經(jīng)常會遇到選項(xiàng)卡切換,對于一個(gè)前端工程師來說,組件化/模塊化開發(fā)是一種必備的行為規(guī)范,下面這篇文章主要給大家介紹了關(guān)于vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶放大鏡的搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue實(shí)現(xiàn)輸入一位數(shù)字轉(zhuǎn)漢字功能
這篇文章主要介紹了vue實(shí)現(xiàn)輸入一位數(shù)字轉(zhuǎn)漢字功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
本篇文章主要介紹了vue better-scroll插件使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01