VueJS to dynamically control the CSS

Question

My use case is something like this,

I got the star rank from the back-end as a digit(1,2,3,4,5).
If it's number 3 I want to color first 3 stars in yellow and reaming to default color. How do I achieve this using Vue JS?

This is my code.

<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>

acdcjunior · Accepted Answer · 2018-03-30 06:21:19Z

You could use v-for and some CSS classes, as shown below.

They would iterate starRank times creating filled-star stars and then iterate 5 - starRank times creating not-filled-star stars.

In the example below, starRank is 3 and, as such, three stars will be yellow.

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>

Nice! I was staring at the index in (5-starRank) and could't think of how does it work :D Seems like looking at StackOverflow just after waking up is not a good idea :)
@sarneeh Haha, look at that, I'm actually about to go to sleep! But I do am much better at night, I really only boot after lunch :P

Collectives™ on Stack Overflow

VueJS to dynamically control the CSS

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related