1. 程式人生 > >解決v-for中使用v-if或者v-bind:class失效的問題

解決v-for中使用v-if或者v-bind:class失效的問題

在v-for迴圈出來的列表中使用v-bing動態繫結class、v-show或v-if動態控制個別item 場景一般多用於多項選擇

原因是在v-for迴圈的時候 items是動態建立,所以不會被監聽並且實時動態控制class

前端精品教程:百度網盤下載

v-if v-bind:class失效

解決方法是 vm.$set 官方文件中有介紹

我的解決方法使用了框架自帶多選按鈕,將樣式呈現出來

v-if v-bind:class失效

v-if v-bind:class失效

但僅僅是樣式呈現,在迴圈items的時候,給它新增屬性isSelect

前端精品教程:百度網盤下載

v-if v-bind:class失效

然後在點選選擇的時候,動態設定isSelect屬性

v-if v-bind:class失效

在提交的時候去迴圈判斷該list每一項的isSelect屬性,從而達到同樣的效果

前端精品教程:百度網盤下載