Vue.js 从模板中分离样式

发布于06月16日

由于CMS的原因，我使用了一个<style>块的模板，其中must be near its div块.

当我运行Vue时.js，它似乎删除了样式块，说...

- Templates should only be responsible for mapping the state to the UI.     
  Avoid placing tags with side-effects in your templates, such as <style>, 
  as they will not be parsed.

我能做什么？

var app = new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>

<div id="app">
  <style>
    #div_123 {
      background: http://placehold.it/850x150;
    }

    @media screen and (max-width: 640px) {
      #div_123 {
         background: http://placehold.it/350x150;
      }
    }
  </style>
  <div id="div_123">
    Test
  </div>
</div>

推荐答案

这适用于我的特定情况，我允许用户存储一个CSS字符串，然后我需要在特定页面上呈现它——ei:预览页面.

这里的上下文是css，保存为数据库中的字符串，在Vue组件中获取和呈现.

# html
<html>
  <head>
    <style id="app_style"></style>
  </head>
  <body>

    <div id="app"></div>

  </body>
</html>

# app.vue

data() {
  return {
    dynamic_css: ''
  }
},

created() {
  // fetch css from database, set as `this.dynamic_css`
},

watch {
  dynamic_css: function(newValue) {
    document.getElementById('app_style').innerHTML = newValue
  }
}

Vue.js相关问答推荐

Vue.js 从模板中分离样式

推荐答案

Vue.js相关问答推荐

VueJS3 - 在 for 循环中获取元素的句柄

使用计算(computed)属性更改视图

Vue Js Composition Api 未定义(读取名称)

在Vue cli项目中，Laravel api app放在哪里以及如何在vue js中调用api？

VueJS - 将单独的组件加载到 vue 实例中

Vue.js 和观察者模式

Vue子组件等待props

如何使用带有自定义标签和类的`transition-group`

Vue-router：循环路由以动态创建

如何在 vue.js 构建中重命名 index.html？

Vue：从 Vue 实例更新组件数据

Vuetify 输入自动完成错误

为什么 vue 文档说 refs 不是响应式的，而实际上它们是响应式的

Vue.js：从 parent父Vue 获取数据

Vue路由安全

无法访问数据对象的嵌套属性

重新加载页面正在 vue 组件中的插槽上闪烁内容

如何让 Vue 在 shadow dom 中工作

如何在 JEST 测试中模拟全局 Vue.js 变量

如何隔离 Vuetify 全局样式