VueJS 使用类选择器绑定样式

Question

我想在这里实现一些非常简单的东西，在 CSS 中：

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

通过查看 VueJS 文档，Style binding 有一种方法可以实现：

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

但是，要这样做，就意味着我需要添加每个 p 标签这样的行，这并不是一个很好的解决方案。

我想要的，就像问题的开头一样，写成这样的

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

这样我就可以做到一次，到处申请。

有没有一种巧妙的方法来做到这一点？即在 VueJS 样式绑定中应用类选择器？非常感谢！

Answer 1

在 Vue 中没有标准的方法。

不过，有一个解决方法/解决方案，它只是一个自定义组件（比如 <v-style> 或您选择的任何名称），因此它与任何其他组件以及 Vue 的所有产品一样可重用——比如 @987654322 @ -- 可以用在它的标签上。这是它的外观：

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> 标签。