Как содержимое секции style поставить в зависимость от значения свойства компонента?

Question

[Алекс]

Можно ли вставить значение переменной {{safariTrue}} в теги style?

<input type="range"  v-model="safariTrue" >

      <style>
        h1{
        margin: {{safariTrue}};
        }
      </style>

Answer 1

[0xD34F]

На свойство компонента вешается наблюдатель, выполняющий обновление css-переменной. Например:

h1 {
  font-size: var(--h1-font-size);
}

<input v-model="fontSize" type="range">
<h1>hello, world!!</h1>

data: () => ({
  fontSize: 24,
}),
mounted() {
  this.$watch(
    'fontSize',
    val => this.$el.style.setProperty('--h1-font-size', `${val}px`),
    { immediate: true }
  );
},

Comments

[Алекс]

Да спасибо, по ходу то что надо)

Answer 2

[Alex]

Можно, но только в атрибут
https://ru.vuejs.org/v2/guide/class-and-style.html...

Comments

[Алекс]

Это да. А если нужно изменить вот так например

@keyframes rotate-one {
    100% {
      transform: rotate({{safariTrue}}.6deg);

    }
  }