Динамический стиль цвет текста с Vue.JS
Этот код находится в Angular
<div [style.color]="'#' + prod.id.substring(0,6)">
<small>{{ prod.id }}</small>
</div>
Мне нужно написать аналогичный код с vue.JS.
У вопроса есть решение - Посмотреть?
Ответы - Динамический стиль цвет текста с Vue.JS / Dynamic style text color with Vue.js
Является ответом!

25.12.2019 03:37:44
Атрибуты стиля можно задать с помощью объекта (ключ как свойство CSS и значение как значение CSS).
<div :style="{ color : '#' + prod.id.substring(0,6) }">
<small>{{ prod.id }}</small>
</div>

25.12.2019 03:41:22
3 синтаксиса, которые вы можете использовать:
<div :style="{ color: '#' + prod.id.substring(0,6)}">
<small>{{ prod.id }}</small>
</div>
<div :style="`color: #${prod.id.substring(0,6)}`">
<small>{{ prod.id }}</small>
</div>
<div :style="'color: #' + prod.id.substring(0,6)">
<small>{{ prod.id }}</small>
</div>
Примечание: :style
равнозначно v-bind:style
Ссылка: https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1
Демо:
new Vue({
el: '#app1',
data: { hex: '0f0' }
});
button {
width: 300px;
height: 100px;
font-size: 5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app1">
<button :style="{ color: '#' + hex}">Button1</button>
<button :style="`color: #${hex}`">Button2</button>
<button :style="'color: #' + hex">Button3</button>
</div>

Спасибо но мне нужно сделать это используя цветовой код от значения переменной

Да я использовал переменное значение человек


Мне очень жаль, но я не получил его, я попробую это сделать

@Gharbi это точно так же, как принятый ответ, просто дайте еще несколько вариантов.

это тоже работает, спасибо

@Гарби добро пожаловать. Пожалуйста, если это работает, то подумайте о том, чтобы дать ему апвот.
Помочь в развитии проекта: