How to insert a dynamic variable?

Question

css

Is it possible to insert the value of the {{safariTrue}} variable into style tags?

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

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

Answer 1

An observer is hung on the property of the component that updates the css variable. For example :

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

<div id="app" ref="app">
  <input v-model="fontSize" type="number">
  <h1>hello, world!!</h1>
</div>

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

Answer 2

It is possible, but only in the attribute
https://ru.vuejs.org/v2/guide/class-and-style.html...