VUE在for循環(huán)里面根據(jù)內(nèi)容值動(dòng)態(tài)的加入class值的方法

發(fā)布時(shí)間：2020-09-09 21:54:55 來(lái)源：腳本之家閱讀：372 作者：admin 欄目：web開(kāi)發(fā)

最近在做玩家螞蟻?lái)?xiàng)目的時(shí)候遇到了一個(gè)評(píng)分顯示的小功能，這個(gè)在前端顯示的星星是用class樣式來(lái)進(jìn)行控制的

class =” real-star comment-stars-width6 ”

數(shù)據(jù)庫(kù)里記錄的信息只有一個(gè)評(píng)分1-5。我們?nèi)绻靡话愕膒hp方法直接在class里面用 comment-stars-width{$score}這樣是行不通的。在查了很多資料和做過(guò)很多嘗試以后，確定了一個(gè)可行的方法

我們使用vue的:class來(lái)進(jìn)行class的綁定。:class=”`comment-stars-width`+s.score” 然后把前面需要的屬性前綴用 “包裹起來(lái)，后面的值用+號(hào)連起來(lái)，這樣渲染出來(lái)的數(shù)據(jù)就是我們想要的數(shù)據(jù)樣式了！

總結(jié)

以上所述是小編給大家介紹的VUE在for循環(huán)里面根據(jù)內(nèi)容值動(dòng)態(tài)的加入class值的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

向AI問(wèn)一下細(xì)節(jié)

VUE在for循環(huán)里面根據(jù)內(nèi)容值動(dòng)態(tài)的加入class值的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽