По сути вам нужно добавить какой-то класс идентификации на слово «здоровый».
Для этого необходимо изменить исходные данные food
. Вы можете использовать computed
для генерации новых highlightedFood
данных, которые заменяют «здоровые» на <span class="highlight">healthy</span>
. Вы можете просто стилизовать то, что вы хотите в теге style.
<template>
<div id="app">
<div v-for="(item, index) in highlightedFood" :key="index">
<div v-html="item"></div>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
food: [
{ name: "fish", message: "It is great!" },
{ name: "carrot", message: "It is healthy!" }
]
};
},
computed: {
highlightedFood() {
return this.food.map(item => {
return {
name: item.name,
message: item.message.replace(
"healthy",
"<span class='highlight'>healthy</span>"
)
};
});
}
}
};
</script>
<style>
.highlight {
color: green;
}
</style>
Обратите внимание, что если вы используете CSS с областью действия, вам придется использовать глубокий комбинатор:
<style scoped>
#app >>> .highlight {
color: green;
}
</style>
Подробнее о глубоких селекторах: https://vue -loader.vuejs.org / guide / scoped-css.html # deep-selectors