在 vuejs 模板中使用样式标签并从数据模型更新

Question

我想动态更新样式 inside 样式标签。

但是，为 Vue 创建容器模型会删除 style 标签。我知道样式标签应该放在页面的头部，但这只是为了方便使用。

所以我想要的是一个包含元素和样式标签的包装器：

 <div class="setting">
  <style>
    .setting input {
      background: {{bgColor}};
    }
  </style>
  <input class="setting" type="text" v-model="bgColor">
</div>

输入的值应该更新 css 样式的值。每当完成简单的 div 元素时，这都有效，但样式标签似乎是个问题

javascript 设置如下：

 new Vue({
    el: '.setting',
    data: {
      bgColor: 'red'
    }
});

但是，当样式标签具有特定 id 时，这可能会起作用，但我无法将其绑定到输入字段。

 <style id="setting">
  #blue {
    background: {{bg}}
  }
  #blue:hover {
    background: {{bgHover}}
  }
</style>

<div id="blue"></div>

和 js：

 new Vue({
    el: '#setting',
    data: {
      bg: 'blue',
      bgHover: 'red'
    }
});

有人可以帮助我了解如何实现样式标签之间的更新值。 jsfiddle设置

谢谢。

原文由 ForDev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是我认为很好的解决方法/解决方案。

它只是一个自定义组件，所以它尽可能地可重用。所有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: {
    bgColor: 'red'
  }
})

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

<div id="app" class="stuff">
  <v-style>
    .stuff input {
      background: {{bgColor}};
    }
  </v-style>

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

我看到的一个缺点是，由于标签的名称是 <v-style> （或您选择的任何名称）而不是 <style> ，IDE 可能无法很好地为其着色。但否则它就像一个普通的 <style> 标签。

---

标准解决方案：使用 v-bind:style

这不会修改 style 标签，但设置样式的标准方法是使用 对象样式绑定。

基本上，您将使用 :style 属性并以对象的形式为其分配样式的 CSS 属性。下面的演示。

 new Vue({
  el: '.setting',
  data: {
    bgColor: 'red'
  },
  computed: {
    inputStyles() {
      return {
        background: this.bgColor
      }
    }
  }
});

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

<div class="setting">
  Remove "red" and type "yellow":
  <input class="setting" type="text" v-model="bgColor" :style="inputStyles">
</div>

原文由 acdcjunior 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

vue-loader（和 Vue 模板编译器 Vue.compile(..) ）都将过滤掉 <style> 在 template .

解决这个问题的一个简单解决方案是利用 Vue 的内置 <component> 组件。

 <template>
  <div>
    <component is="style">
      .foo[data-id="{{ uniqueId }}"] {
        color: {{ color }};
      }
      .foo[data-id="{{ uniqueId }}"] .bar {
        text-align: {{ align }}
      }
    </component>
    <div class="foo" :id="id" :data-id="uniqueId">
      <div class="bar">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: null
    }
  },
  computed: {
    uniqueId() {
      // Note: this._uid is not considered SSR safe though, so you
      // may want to use some other ID/UUID generator that will
      // generate the same ID server side and client side. Or just
      // ensure you always provide a unique ID to the `id` prop
      return this.id || this._uid;
    },
    color() {
      return someCondition ? 'red' : '#000';
    },
    align() {
      return someCondition ? 'left' : 'right';
    }
  }
}
</script>

需要一个唯一的 ID（或其他一些数据属性）才能将样式“范围”限定到该组件。

这是一个很好的解决方案，因为您可以使用 v-for 循环来生成样式内容（如果需要）（它可以对组件数据/道具/计算道具的变化做出反应）

 <component is="style" type="text/css">
  <template v-for="item in items">
    [data-id="{{ uniqueId }}"] div.bar[data-div-id="item.id"]::before {
      content: "{{ item.content }}";
      color: {{ item.color }};
    }
  </template>
</component>

原文由 Troy Morehouse 发布，翻译遵循 CC BY-SA 4.0 许可协议