Element Rate 評分的使用方法
更新時間：2020年07月27日 11:23:31 作者：ForeverJPB.
這篇文章主要介紹了Element Rate 評分的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
組件—評分
基礎(chǔ)用法
<div class="block">
<span class="demonstration">默認(rèn)不區(qū)分顏色</span>
<el-rate v-model="value1"></el-rate>
</div>
<div class="block">
<span class="demonstration">區(qū)分顏色</span>
<el-rate
v-model="value2"
:colors="colors">
</el-rate>
</div>
<script>
export default {
data() {
return {
value1: null,
value2: null,
colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
}
}
}
</script>
————————————————
版權(quán)聲明：本文為CSDN博主「ForeverJPB.」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/GU_AO_SHI_TAI_DU/article/details/94563654
輔助文字
<div class="block">
<span class="demonstration">默認(rèn)不區(qū)分顏色</span>
<el-rate v-model="value1"></el-rate>
</div>
<div class="block">
<span class="demonstration">區(qū)分顏色</span>
<el-rate
v-model="value2"
:colors="colors">
</el-rate>
</div>
<script>
export default {
data() {
return {
value1: null,
value2: null,
colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
}
}
}
</script>
其它 icon
<el-rate
v-model="value"
:icon-classes="iconClasses"
void-icon-class="icon-rate-face-off"
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate>
<script>
export default {
data() {
return {
value: null,
iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
}
}
}
</script>
只讀
<el-rate
v-model="value"
disabled
show-score
text-color="#ff9900"
score-template="{value}">
</el-rate>
<script>
export default {
data() {
return {
value: 3.7
}
}
}
</script>
Attributes
Events
到此這篇關(guān)于Element Rate 評分的使用方法的文章就介紹到這了,更多相關(guān)Element Rate 評分內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實現(xiàn)導(dǎo)航標(biāo)題欄隨頁面滾動漸隱漸顯效果
這篇文章主要介紹了vue實現(xiàn)導(dǎo)航標(biāo)題欄隨頁面滾動漸隱漸顯效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
Vue中nprogress頁面加載進(jìn)度條的方法實現(xiàn)
這篇文章主要介紹了Vue中nprogress頁面加載進(jìn)度條的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了vue 在單頁面應(yīng)用里使用二級套嵌路由，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了Vue中使用debugger在瀏覽器中不起作用的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了VUE3+TS獲取組件類型的方法踩坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)多圖添加顯示和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了vue 中 命名視圖的用法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2019-08-08
這篇文章主要為大家詳細(xì)介紹了vue+el-menu實現(xiàn)菜單欄無限多層級分類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue開發(fā)工具之vuejs-devtools安裝教程及常見問題解決(最詳細(xì))
這篇文章主要介紹了Vue開發(fā)工具vuejs-devtools超級詳細(xì)安裝教程以及常見問題解決本篇文章是最詳細(xì)的vue開發(fā)工具vuejs-devtools安裝教程,需要的朋友可以參考下2022-11-11
v-model就是vue的雙向綁定的指令,能將頁面上控件輸入的值同步更新到相關(guān)綁定的data屬性,也會在更新data綁定屬性時候,更新頁面上輸入控件的值,這篇文章主要介紹了Vue之v-model的使用,需要的朋友可以參考下2025-04-04