Отображение текста с другим цветом на основе результата вычисленного свойства?
В настоящее время у меня есть что-то вроде:
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?
15.09.2019 04:13:57
Вы можете использовать условный класс, как это:
<p :class="highestMultiKill == 1 ? 'blue' : 'otherClass'">highestMultiKill</p>
Смотрите полную документацию по условным классам в Vue.Яш здесь.
Кстати, вы не должны инициализировать summonerMatchesсо строкой, если это на самом деле объект с реактивными свойствами.
15.09.2019 05:05:29
Лучший способ сделать это, если у вас есть сложная логика, включающая множество переменных и классов или, что-то вроде этого:
<p :class="killClass"></div>
computed: {
killClass: function () {
return {
highestMultiKill >= 3 ? 'blue' : 'red'
}
}
}
Если у вас есть больше классов/состояний, то используйте оператор if вместо этого.
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
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>