Динамический стиль цвет текста с Vue.JS

Динамический стиль цвет текста с Vue.JS

25.12.2019 03:32:45 Просмотров 42 Источник

Этот код находится в 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

Является ответом!
Pranav C Balan

25.12.2019 03:37:44

Атрибуты стиля можно задать с помощью объекта (ключ как свойство CSS и значение как значение CSS).

<div :style="{ color : '#' + prod.id.substring(0,6) }">
    <small>{{ prod.id }}</small>
</div>
Loi Nguyen Huynh

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>

https://stackoverflow.com/questions/59478443/dynamic-style-text-color-with-vue-js/59478485#comment105134132_59478485
Спасибо но мне нужно сделать это используя цветовой код от значения переменной
https://stackoverflow.com/questions/59478443/dynamic-style-text-color-with-vue-js/59478485#comment105134145_59478485
Да я использовал переменное значение человек
https://stackoverflow.com/questions/59478443/dynamic-style-text-color-with-vue-js/59478485#comment105134191_59478485
Они hexв моей запускаемой демо-версии или prod.id.substring(0,6)в образце.
https://stackoverflow.com/questions/59478443/dynamic-style-text-color-with-vue-js/59478485#comment105134228_59478485
Мне очень жаль, но я не получил его, я попробую это сделать
https://stackoverflow.com/questions/59478443/dynamic-style-text-color-with-vue-js/59478485#comment105134982_59478485
@Gharbi это точно так же, как принятый ответ, просто дайте еще несколько вариантов.
https://stackoverflow.com/questions/59478443/dynamic-style-text-color-with-vue-js/59478485#comment105135749_59478485
это тоже работает, спасибо
https://stackoverflow.com/questions/59478443/dynamic-style-text-color-with-vue-js/59478485#comment105137980_59478485
@Гарби добро пожаловать. Пожалуйста, если это работает, то подумайте о том, чтобы дать ему апвот.
Закрыть X