Отображение текста с другим цветом на основе результата вычисленного свойства?

Отображение текста с другим цветом на основе результата вычисленного свойства?

15.09.2019 04:05:44 Просмотров 48 Источник

В настоящее время у меня есть что-то вроде:

data(){
    return {
        summonerMatches: '',
    }
},
computed: {
    highestMultikill(){
        let highestMultikill = 0;

        for (let match of this.summonerMatches.matches) {
            if (highestMultikill < match.mainParticipant.stats.largestMultiKill) {
                highestMultikill = match.mainParticipant.stats.largestMultiKill
            }
        }

        return highestMultikill
    },
}

Когда я использую это вычисленное свойство в моем шаблоне, как это:

<p>{{ highestMultikill }}</p>

Я визуализирую число, которое символизирует наивысшее множественное убийство пользователя. Теперь я хотел бы каким-то образом добавить класс к этому <p>, основанному на highestMultiKill. Если highestMultiKill = 1, Установите класс, который меняет цвет на синий, если highestMultiKill = 5, Установите класс, который меняет цвет на красный и т. д.

Я не уверен, как это сделать с моей текущей настройкой. Я думал о том, чтобы вычисленное свойство возвращало совершенно другой <p>, основанный на переменной highestMultikill, как это:

if (highestMultiKill == 1) {
    return <p class='blue'>highestMultiKill</p>
} else {
    return a different `<p>` element with a different class
}

Это правильный способ сделать это?

У вопроса есть решение - Посмотреть?

Ответы - Отображение текста с другим цветом на основе результата вычисленного свойства? / Displaying text with different color based on result from a computed property?

andypotato

15.09.2019 04:13:57

Вы можете использовать условный класс, как это:

<p :class="highestMultiKill == 1 ? 'blue' : 'otherClass'">highestMultiKill</p>

Смотрите полную документацию по условным классам в Vue.Яш здесь.

Кстати, вы не должны инициализировать summonerMatchesсо строкой, если это на самом деле объект с реактивными свойствами.

https://stackoverflow.com/questions/57940382/displaying-text-with-different-color-based-on-result-from-a-computed-property/57940406#comment102296079_57940406
Но что делать, если логика длиннее, или есть несколько, если elses?
https://stackoverflow.com/questions/57940382/displaying-text-with-different-color-based-on-result-from-a-computed-property/57940406#comment102297145_57940406
Как @sevensidedmarble предполагает, что вы можете использовать вычисленное свойство в этом случае.
sevensidedmarble

15.09.2019 05:05:29

Лучший способ сделать это, если у вас есть сложная логика, включающая множество переменных и классов или, что-то вроде этого:

<p :class="killClass"></div>
computed: {
  killClass: function () {
    return {
      highestMultiKill >= 3 ? 'blue' : 'red'
    }
  }
}

Если у вас есть больше классов/состояний, то используйте оператор if вместо этого.

David Weldon

15.09.2019 05:07:56

Вот пример с более сложной логикой и именами классов, вдохновленными BEM:

<template>
  <p :class="klass">{{ highestMultiKill }}</p>
</template>

<script>
export default {
  data() {
    return { highestMultiKill: 0 };
  },
  computed: {
    klass() {
      return {
        score: true, // Always have a score class
        'score--low': this.highestMultiKill <= 2,
        'score--medium': this.highestMultiKill > 2 && this.highestMultiKill <= 5,
        'score--high': this.highestMultiKill > 5 && this.highestMultiKill <= 10,
        'score--blood-lust': this.highestMultiKill > 10,
      };
    },
  },
};
</script>

<style scoped>
.score {
  line-height: 2;
}

.score--low {
  color: blue;
}
.score--medium {
  color: pink;
}
.score--medium {
  color: red;
}
.score--medium {
  color: darkred;
}
</style>

Идея заключается в том, что p будет иметь класс, как: score score--medium

ali4j

15.09.2019 09:23:18

Этот образец может быть полезен:

<html>
  <head>

  </head>
  <body>

    <div id="container">
      <p v-if="this.computedValue==0" style="color:blue;" >content0</p>
      <p v-if="this.computedValue==1" style="color:red;" >content1</p>
      <p v-if="this.computedValue==2" style="color:green;" >content2</p>
      <p v-if="this.computedValue==3" style="color:yellow;" >content3</p> 
      <p v-if="this.computedValue==4" style="color:pink;" >content4</p>
      <p v-if="this.computedValue==5" style="color:aquamarine;" >content5</p>
      <p v-if="this.computedValue==6" style="color:blueviolet;" >content6</p>
      <p v-if="this.computedValue==7" style="color:brown;" >content7</p>
      <p v-if="this.computedValue==8" style="color:chartreuse;" >content8</p>
      <p v-else>content9</p>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
    <script>

      new Vue({
        el: '#container',
        data: {
          value: '',
        },
        computed: {
          computedValue: function() {
            var styleNumber = 0;/*return a number based on a logic*/

            return styleNumber; 
          }
        }
      });

    </script>

  </body>
</html>
Закрыть X