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樣式來進行控制的
class =” real-star comment-stars-width5 ”
數(shù)據(jù)庫里記錄的信息只有一個評分1-5。我們?nèi)绻靡话愕膒hp方法直接在class里面用 comment-stars-width{$score}這樣是行不通的。在查了很多資料和做過很多嘗試以后，確定了一個可行的方法
我們使用vue的:class來進行class的綁定。:class=”`comment-stars-width`+s.score” 然后把前面需要的屬性前綴用 “包裹起來，后面的值用+號連起來，這樣渲染出來的數(shù)據(jù)就是我們想要的數(shù)據(jù)樣式了！
總結
以上所述是小編給大家介紹的VUE在for循環(huán)里面根據(jù)內(nèi)容值動態(tài)的加入class值的方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
您可能感興趣的文章:
- 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ù)的實例
- 關于vue v-for循環(huán)解決img標簽的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標簽仿select標簽)
- 淺談Vue Element中Select下拉框選取值的問題
- vue動態(tài)循環(huán)出的多個select出現(xiàn)過的變?yōu)閐isabled(實例代碼)
相關文章
在用vite創(chuàng)建vue3項目時已經(jīng)選擇了添加ESLint,本文就來介紹一下ESLint在項目中需要怎樣配置和使用,具有一定的參考價值,感興趣的可以了解一下2023-09-09
這篇文章主要給大家介紹了關于vue.js整合vux中上拉加載下拉刷新的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01
淺談vue中改elementUI默認樣式引發(fā)的static與assets的區(qū)別
下面小編就為大家分享一篇淺談vue中改elementUI默認樣式引發(fā)的static 與assets的區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue結合v-for和input實現(xiàn)多選列表checkbox功能
在Vue中,可通過v-for指令和v-model實現(xiàn)多選列表功能,首先,使用v-for指令遍歷數(shù)組生成列表項,每個列表項包含一個復選框,復選框的v-model綁定到一個數(shù)組變量,用于存儲選中的值,感興趣的朋友跟隨小編一起看看吧2024-09-09
Vue?3?使用moment設置顯示時間格式的問題及解決方法
在Vue?3中,因為過濾器(filter)已經(jīng)被廢棄,取而代之的是全局方法(global?method),本文給大家介紹Vue?3?使用moment設置顯示時間格式的問題及解決方法,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了vue.js刪除動態(tài)綁定的radio的指定項,需要的朋友可以參考下2017-06-06
在 Vue.js 中，父子組件通信是非常重要的，在本文中，我們討論了 Vue.js 中父子組件通信的幾種方式，包括使用 props 傳遞數(shù)據(jù)、使用 Sync 修飾符實現(xiàn)雙向綁定、使用自定義事件傳遞數(shù)據(jù)、使用 $refs 訪問子組件實例以及使用 $children 和 $parent 訪問父子組件實例2023-09-09
這篇文章主要介紹了使用 Vue 實現(xiàn)一個虛擬列表的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
今天在修改 el-table 源碼過程中遇到一個頭大的問題,原本修改編譯后,將 element的子目錄lib下的文件復制到項目的響應目錄里就可以了,但是這次總出問題,下面小編給大家分享element ui 添加自定義方法,感興趣的朋友一起看看吧2024-02-02
這篇文章主要介紹了15 分鐘掌握vue-next響應式原理,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10