解決v-for中使用v-if或者v-bind:class失效的問題
更新時(shí)間：2018年09月25日 10:53:35 作者：愛情與靈藥cium
今天小編就為大家分享一篇解決v-for中使用v-if或者v-bind:class失效的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
在v-for循環(huán)出來的列表中使用v-bing動態(tài)綁定class、v-show或v-if動態(tài)控制個(gè)別item 場景一般多用于多項(xiàng)選擇
原因是在v-for循環(huán)的時(shí)候 items是動態(tài)創(chuàng)建，所以不會被監(jiān)聽并且實(shí)時(shí)動態(tài)控制class
解決方法是 vm.$set 官方文檔中有介紹
我的解決方法使用了框架自帶多選按鈕，將樣式呈現(xiàn)出來
但僅僅是樣式呈現(xiàn)，在循環(huán)items的時(shí)候，給它新增屬性isSelect
然后在點(diǎn)擊選擇的時(shí)候，動態(tài)設(shè)置isSelect屬性
在提交的時(shí)候去循環(huán)判斷該list每一項(xiàng)的isSelect屬性，從而達(dá)到同樣的效果
以上這篇解決v-for中使用v-if或者v-bind:class失效的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue路由跳轉(zhuǎn)router-link清除歷史記錄的三種方式(總結(jié))
這篇文章主要介紹了vue路由跳轉(zhuǎn)router-link清除歷史記錄的三種方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章介紹了Vue使用$set和$delete操作對象屬性的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vuex mutations 同步操作方法,需要的朋友可以參考下2023-10-10
詳解vue-cli 3.0 build包太大導(dǎo)致首屏過長的解決方案
這篇文章主要介紹了詳解vue-cli 3.0 build包太大導(dǎo)致首屏過長的解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
今天小編就為大家分享一篇淺談vuex的基本用法和mapaction傳值問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能的實(shí)例代碼，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了修改Vue打包后的默認(rèn)文件名操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了vuejs實(shí)現(xiàn)下拉框菜單選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要給大家介紹了關(guān)于Vue單頁面骨架屏實(shí)踐的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-12-12
async和await作為異步函數(shù),語法很簡單,就是在函數(shù)前面加上async 關(guān)鍵字,來表示它是異步的,下面這篇文章主要給大家介紹了如何通過一文教會你vue中使用async和await的相關(guān)資料,需要的朋友可以參考下2022-10-10