and pardon my novice for I am just a mere beginner. I am looking to display white and black progress percentages depending on the the progress state. I have tried some if statements and even made a new classes for black and white progress state, but so far I have had zero success.

Like the title says, I am looking for a way to display black text from 0-40% and white text from 60-100% if that is possible with a small amount of code, that would be incredible.

If any advice could be spared at all, it would be greatly appreciated.

Here is the code that pertains to this problem;

<template>
  <div id="banner">
    <span>Pallet Request</span>
    <img src="./assets/pallet.svg" />
  </div>
  <KeepAlive>
    <router-view />
  </KeepAlive>

  <div id="actionBarDiv">
    <button v-if="$route.meta.backEnabled" id="backButton" @click="lastPage()">
      <span>Back</span>
    </button>

    <div id="progressBar">
      <span id="innerProgress" :style="{ width: progressState   '%' }"></span>
      <span id="innerProgressText">{{ progressState   '%' }}</span>
    </div>

    <button id="nextButton" @click="nextPage()">
      <span>Next</span>
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      progressState: 0
    }
  },
  methods: {
    async nextPage() {
      let tmpPath = '/';
      switch (this.$route.name) {
        case "welcome":
          tmpPath = '/basicInfo'
          this.progressState = 20
          break;
        case "basicInfo":
          tmpPath = '/orderBasics'
          this.progressState = 40
          break;
        case "orderBasics":
          tmpPath = '/orderDetails'
          this.progressState = 60
          break;
        case "orderDetails":
          tmpPath = '/confirmation'
          this.progressState = 80
          break;
        case "confirmation":
          // if (confirm("Is all of your data correct?")) {
          tmpPath = '/farewell'
          this.progressState = 100
          // } else {
          //   tmpPath = '/confirmation'
          break;
        case "farewell":
          tmpPath = '/'
          this.progressState = 0
          break;
        default:
          break;
      }
      this.$router.push({
        path: tmpPath,
      });
    },

    async lastPage() {
      let tmpPath = '/';

      switch (this.$route.name) {
        case "basicInfo":
          tmpPath = '/'
          this.progressState = 0
          break;
        case "orderBasics":
          tmpPath = '/basicInfo'
          this.progressState = 20
          break;
        case "orderDetails":
          tmpPath = '/orderBasics'
          this.progressState = 40
          break;
        case "confirmation":
          tmpPath = '/orderDetails'
          this.progressState = 60
          break;
        default:
          break;
      }
      this.$router.push({
        path: tmpPath,
      });
    },
  },
});
</script>

and here is the sass

<style lang="sass">

html, body
  height: 100%
  margin: 0 !important
  padding: 0 !important

#app
  position: relative
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  background: white
  font-family: 'Poppins', sans-serif
  color: black
  overflow-x: hidden
  height: 100%

  display: flex
  flex-direction: column
</style>

<style lang="sass" scoped>

#banner
  align-self: center
  background: #ddd
  width: 1200px
  height: 150px
  border-radius: 0 0 1rem 1rem
  padding: 0 5rem

  display: flex
  flex-direction: row
  align-items: center
  justify-content: space-between

  span
    font-size: 2rem

  img
    max-width: 75px

#actionBarDiv
  position: absolute
  left: 0
  bottom: 0
  width: 100%

  display: grid
  grid-template-areas: ".backButton progressBar nextButton ."
  grid-template-columns: 1fr 200px auto 200px 1fr
  grid-template-rows: auto
  gap: 1rem

  background: $tertiary-background
  padding: .75rem 0

  *
    user-select: none

#backButton
  grid-area: backButton
  justify-self: end
  border: 1px solid $primary-accent-color
  font-size: 1.5rem
  border-radius: .25rem
  cursor: pointer
  padding: .25rem .75rem
  transition: background .3s, color .3s
  color: $primary-accent-color
  background: transparent

  // display: flex
  flex-direction: row
  justify-content: center
  align-items: center

  &:hover
    color: $tertiary-background
    background: $primary-accent-color

#nextButton
  grid-area: nextButton
  border: 1px solid $primary-accent-color
  font-size: 1.5rem
  border-radius: .25rem
  cursor: pointer
  padding: .25rem .75rem
  transition: background .3s, color .3s
  color: $primary-accent-color
  background: transparent
  justify-self: start

  // display: flex
  flex-direction: row
  justify-content: center
  align-items: center

  &:hover
    color: $tertiary-background
    background: $primary-accent-color

#progressBar
  grid-area: progressBar
  justify-self: center
  border-radius: .5rem
  width: 20rem
  user-select: none
  background: lighten($tertiary-background, 50)
  position: relative
  overflow: hidden

  #innerProgress
    position: absolute
    left: 0
    top: 0
    height: 100%
    // width: 50%
    background: $secondary-color

    transition-property: width, background
    transition-duration: 1s
    transition-timing-function: ease
    
  #innerProgressText
    position: absolute
    top: 5px
    height: 100%
    left: 50%
    margin-right: -50%
    transform: translate(-50%)
    color: white
    font-size: 1.1rem
</style>

Again, Thank you so much and have a great day. If any advice could be thrown my way, it would be greatly appreciated.

CodePudding user response：

The simplest way, without dealing with classes, is to dynamically bind a style:

<span 
    id="innerProgressText" 
    :style="{ color: progressState <= 40 ? 'black' : 'white' }"
    >
        {{ progressState   '%' }}
</span>

In case of a classed approach, I would make another class for black text (leaving the default color white).

.innerProgressText-black
    color: black !important

and, append that class dynamically the same way as above:

<span 
    id="innerProgressText" 
    :
    >
        {{ progressState   '%' }}
</span>