小编For*_*Dev的帖子

我想动态更新样式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成立

谢谢.