在vuejs模板中使用样式标签并从数据模型更新 [英] Use style tags inside vuejs template and update from data model

问题描述

我想在样式标签内动态更新样式。

I would like to dynamically update styles inside style tags.

然而，为Vue创建容器模型，删除样式标记。
我知道样式标签应该属于页面的头部，但这只是为了方便使用。

However creating a container model for Vue, removes the style tags. I know style tags should belong in the head of the page, but this is just for the sake of ease of use.

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

So what I would like to have is a wrapper with an element and style tags inside:

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

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

The value from the input should update the value of the css style. Whenever done with simple div elements this works, but style tags seem to be a problem

javascript设置如下：

The javascript set up is the following:

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

但是当样式标签具有特定ID时，这可能有效，但我无法绑定它到输入字段。

However when the style tags have a specific id, this could work, but I can't bind it to an input field.

<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设置

Can someone help me understand how I can achieve updating values between style tags. jsfiddle set up

谢谢。

推荐答案

以下是我认为好的解决方法/解决方案。

Here's what I think is a good workaround/solution.

它只是一个自定义组件，因此它可以重复使用。所有Vue的商品，如 v-if 都可以使用。

It is just a custom component, so it's as reusable as it gets. All of Vue's goods like v-if can all be used.

另一个专业是生成的样式将是只要组件就！

Another pro is that the styles generated will be there only as long as the component is!

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

The one drawback I see is that since the name of the tag is <v-style> (or whatever you chose to call it) and not <style>, the IDEs may not color it nicely. But otherwise it'll just be like a regular <style> tag.

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

This doesn't modify style tags, but the standard way of setting styles is using object style bindings.

基本上你使用：style 属性，并以对象的形式为其指定样式的CSS属性。演示如下。

Basically you'd use a :style attribute and assign to it the CSS properties of the style in the form of an object. Demo below.

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>

这篇关于在vuejs模板中使用样式标签并从数据模型更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！