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的所有商品一样可重用。 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>标签一样。

VueJS使用类选择器绑定样式

1 个答案: