我的用例是这样的,
- 我从后端获得了数字形式的星级(1,2,3,4,5)。
- 如果是 3 号,我想将前 3 颗星涂成黄色,然后扩孔为默认颜色。 如何使用 Vue JS 实现此目的?
这是我的代码。
<template>
<div id="app">
<span class="demo">★★★★★</span>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
}
},
methods:{
}
}
</script>
<style>
.demo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 6em;
color:yellow;
text-shadow: 0 0 15px blue;
}
</style>
最佳答案
您可以使用 v-for
和一些 CSS 类,如下所示。
他们会迭代 starRank
次创建 filled-star
星,然后迭代 5 - starRank
次创建 not-filled-star
星星。
在下面的示例中,starRank
为 3
,因此,三颗星将为黄色。
new Vue({
el: '#app',
data() {
return {
starRank: 3
}
}
})
.demo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 6em;
text-shadow: 0 0 15px blue;
}
.filled-star { color: yellow; }
.not-filled-star { color: blue; }
<script src="https://unpkg.com/vue"></script>
<div id="app">
<span class="demo">
<span v-for="index in starRank" class="filled-star">★</span><span v-for="index in (5-starRank)" class="not-filled-star">★</span>
</span>
</div>
关于css - VueJS 动态控制 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49569350/