Динамический стиль цвет текста с 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

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