解決v-for中使用v-if或者v-bind:class失效的問題
更新時間：2018年09月25日 10:53:35 作者：愛情與靈藥cium
今天小編就為大家分享一篇解決v-for中使用v-if或者v-bind:class失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在v-for循環(huán)出來的列表中使用v-bing動態(tài)綁定class、v-show或v-if動態(tài)控制個別item 場景一般多用于多項(xiàng)選擇
原因是在v-for循環(huán)的時候 items是動態(tài)創(chuàng)建，所以不會被監(jiān)聽并且實(shí)時動態(tài)控制class
解決方法是 vm.$set 官方文檔中有介紹
我的解決方法使用了框架自帶多選按鈕，將樣式呈現(xiàn)出來
但僅僅是樣式呈現(xiàn)，在循環(huán)items的時候，給它新增屬性isSelect
然后在點(diǎn)擊選擇的時候，動態(tài)設(shè)置isSelect屬性
在提交的時候去循環(huán)判斷該list每一項(xiàng)的isSelect屬性，從而達(dá)到同樣的效果
以上這篇解決v-for中使用v-if或者v-bind:class失效的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Element中table組件(el-table)右側(cè)滾動條空白占位處理
當(dāng)我設(shè)置了max-height,就會在表格右側(cè)出現(xiàn)一列空白的占位,本文主要介紹了Element中table組件(el-table)右側(cè)滾動條空白占位處理,感興趣的可以了解一下2023-09-09
vue實(shí)現(xiàn)頁面內(nèi)容禁止選中功能,僅輸入框和文本域可選
今天小編就為大家分享一篇vue實(shí)現(xiàn)頁面內(nèi)容禁止選中功能,僅輸入框和文本域可選，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要給大家介紹了關(guān)于Vue.js實(shí)例方法之生命周期的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
使用el-checkbox-group選中后值為true和false遇到的坑
這篇文章主要介紹了使用el-checkbox-group選中后值為true和false遇到的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue組件公用方法提取mixin實(shí)現(xiàn)，多個組件共用一個方法時可以用?mixin?抽取到一個js文件中，作為共用方法，下面一起進(jìn)入文章了解更多詳細(xì)內(nèi)容吧2022-03-03
在vue項(xiàng)目中使用codemirror插件實(shí)現(xiàn)代碼編輯器功能
這篇文章主要介紹了在vue項(xiàng)目中使用codemirror插件實(shí)現(xiàn)代碼編輯器功能（代碼高亮顯示及自動提示）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
vue3動態(tài)加載組件以及動態(tài)引入組件詳解
?平常的vue項(xiàng)目開發(fā),已經(jīng)很難遇見一千行,甚至幾千行代碼的頁面了,畢竟大家都會去拆分組件,下面這篇文章主要給大家介紹了關(guān)于vue3動態(tài)加載組件以及動態(tài)引入組件的相關(guān)資料,需要的朋友可以參考下2023-03-03
require是node中的一個方法,他的作用是用于引入模塊、 JSON、或本地靜態(tài)文件,這篇文章主要介紹了vue中的require使用,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue 的鉤子函數(shù)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
剛學(xué)vue時候?qū)τ谌纸M件和局部組件有點(diǎn)懵,不知道什么時候用全局,什么時候用局部,下面這篇文章主要給大家介紹了關(guān)于Vue組件如何自動按需引入的相關(guān)資料,需要的朋友可以參考下2021-12-12