VueJS 动态控制 CSS

Question

我的用例是这样的，

1. 我从后端获得了星级作为数字（1,2,3,4,5）。
2. 如果它是 3 号，我想将前 3 颗星涂成黄色，然后将其扩孔为默认颜色。 如何使用 Vue JS 实现这一目标？

这是我的代码。

<template>
  <div id="app">
    <span class="demo">&#9733;&#9733;&#9733;&#9733;&#9733;</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>

Answer 1

您可以使用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">&#9733;</span><span v-for="index in (5-starRank)" class="not-filled-star">&#9733;</span>
  </span>
</div>