Стиль связывания VueJS с селектором класса

Question

Я хочу реализовать кое-что очень простое здесь, кое-что в CSS:

.p {
    color: /*something from javascript logic*/;
}

Проверяя документ VueJS, есть один способ достичь этого с помощью привязки стиля :

<p :style="{color:/*something from javascript*/}"> ... </p>

Однако для этого мне нужно добавить каждую строку p-тега в такую ​​строку, и это не очень хорошее решение.

То, что я хочу, похоже на началовопрос, напишите что-то вроде

.p {
    color: {{mycolor}};
}

Чтобы я мог сделать это один раз, применять везде.

Есть ли изящный способ сделать это?А именно применить селектор класса в привязке стиля VueJS?Большое спасибо!

Answer 1

Нет стандартного способа сделать это в Vue.

Однако есть обходной путь / решение, которое представляет собой просто пользовательский компонент (скажем, <v-style> или как вы его называете), так что его можно использовать повторно, как любой другой компонент, и все товары Vue - например, v-if - может использоваться на его теге. Вот как это будет выглядеть:

Vue.component('v-style', {
  render: function (createElement) {
    return createElement('style', this.$slots.default)
  }
});


// demo usage, check the template
new Vue({
  el: '#app',
  data: {
    myColor: 'red'
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app" class="stuff">
  <v-style>
    .p {
      color: {{myColor}};
    }
  </v-style>

  <div class="p">
  Remove "red" and type "yellow":
  <input class="setting" type="text" v-model="myColor">
  </div>
</div>

Предостережения: сгенерированные стили будут там только до тех пор, пока компонент !

Еще один незначительный недостаток заключается в том, что, поскольку имя тега <v-style> (или как вы его называете), а не <style>, IDE могут не очень хорошо его окрашивать. Но в противном случае это будет просто обычный тег <style>.