我怎样才能简单地在进度为 0-40% 时显示黑色文本，在进度为 60-100% 时显示白色？

Question

请原谅我的新手，因为我只是一个初学者。我希望根据进度状态显示白色和黑色进度百分比。我尝试了一些 if 语句，甚至为黑白进度状态创建了一个新的类，但到目前为止我的成功率为零。

如标题所说，我正在寻找一种方法来显示 0-40% 的黑色文本和 60-100% 的白色文本，如果可以用少量代码实现，那将是不可思议的。

如有任何建议，将不胜感激。

这是与此问题相关的代码；

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

这里是 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>

再次感谢您，祝您有愉快的一天。如果可以向我提出任何建议，将不胜感激。

Answer 1

不处理 classes 的最简单方法是动态绑定样式：

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

如果采用 classed 方法，我会为黑色文本制作另一个 class（保留默认颜色为白色）。

.innerProgressText-black
    color: black !important

然后，以与上述相同的方式动态附加 class：

<span 
    id="innerProgressText" 
    :class="{ 'innerProgressText-black': progressState <= 40 }"
    >
        {{ progressState + '%' }}
</span>

我怎样才能简单地在进度为 0-40% 时显示黑色文本，在进度为 60-100% 时显示白色？

How can I simply display black text at 0-40% progress and white for 60-100% progress?

html

sass

typescript

vue.js