VUE在for循環(huán)里面根據(jù)內(nèi)容值動態(tài)的加入class值的方法
更新時間：2018年08月12日 10:45:51 作者：admin
這篇文章主要介紹了VUE在for循環(huán)里面根據(jù)內(nèi)容值動態(tài)的加入class值的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
最近在做玩家螞蟻項目的時候遇到了一個評分顯示的小功能，這個在前端顯示的星星是用class樣式來進(jìn)行控制的
class =” real-star comment-stars-width5 ”
數(shù)據(jù)庫里記錄的信息只有一個評分1-5。我們?nèi)绻靡话愕膒hp方法直接在class里面用 comment-stars-width{$score}這樣是行不通的。在查了很多資料和做過很多嘗試以后，確定了一個可行的方法
我們使用vue的:class來進(jìn)行class的綁定。:class=”`comment-stars-width`+s.score” 然后把前面需要的屬性前綴用 “包裹起來，后面的值用+號連起來，這樣渲染出來的數(shù)據(jù)就是我們想要的數(shù)據(jù)樣式了！
總結(jié)
以上所述是小編給大家介紹的VUE在for循環(huán)里面根據(jù)內(nèi)容值動態(tài)的加入class值的方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
您可能感興趣的文章:
- VUE2.0+ElementUI2.0表格el-table循環(huán)動態(tài)列渲染的寫法詳解
- 實例分析vue循環(huán)列表動態(tài)數(shù)據(jù)的處理方法
- VUE v-for循環(huán)中每個item節(jié)點動態(tài)綁定不同函數(shù)的實例
- 關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動態(tài)綁定問題
- vue.js 嵌套循環(huán)、if判斷、動態(tài)刪除的實例
- vue2.0 element-ui中el-select選擇器無法顯示選中的內(nèi)容(解決方法)
- vue select選擇框數(shù)據(jù)變化監(jiān)聽方法
- Vue Element 分組+多選+可搜索Select選擇器實現(xiàn)示例
- vue 不使用select實現(xiàn)下拉框功能(推薦)
- Vue.js做select下拉列表的實例(ul-li標(biāo)簽仿select標(biāo)簽)
- 淺談Vue Element中Select下拉框選取值的問題
- vue動態(tài)循環(huán)出的多個select出現(xiàn)過的變?yōu)閐isabled(實例代碼)
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)滑動超出指定距離回頂部功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了vue-cli--組件的導(dǎo)入與使用詳解，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
淺談Vue CLI 3結(jié)合Lerna進(jìn)行UI框架設(shè)計
這篇文章主要介紹了淺談Vue CLI 3結(jié)合Lerna進(jìn)行UI框架設(shè)計,在此之前先簡單介紹一下Element的構(gòu)建流程，以便對比新的UI框架設(shè)計。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
vue2和vue3部署到服務(wù)器子目錄為空白頁問題及解決
這篇文章主要介紹了vue2和vue3部署到服務(wù)器子目錄為空白頁問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決
這篇文章主要介紹了vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue 獲取元素額外生成的data-v-xxx操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
electron + vue項目實現(xiàn)打印小票功能及實現(xiàn)代碼
這篇文章主要介紹了electron + vue項目實現(xiàn)打印小票功能,需要的朋友可以參考下2018-11-11
使用vue深度選擇器修改ElementUI組件內(nèi)樣式的示例代碼
在帶有scoped屬性的style中書寫樣式時，無法作用影響到子組件中的樣式，此時我們會使用到deep深度選擇器，來解決此問題，我們在使用less預(yù)處理器，能正常使用，但是在scss預(yù)處理器中會報錯，下面通過本文介紹vue深度選擇器修改ElementUI組件內(nèi)樣式,需要的朋友可以參考下2022-12-12
vue?動態(tài)添加el-input的實現(xiàn)邏輯
這篇文章主要介紹了vue?動態(tài)添加el-input的實現(xiàn)代碼，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue兩種組件類型:遞歸組件和動態(tài)組件的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08