<style> 标签在 vue.js 元素中不起作用

Question

例子：

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Bob'
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  Hello {{name}}
  <style>
  body { color: blue; }
  </style>
</div>

JS 小提琴：https://jsfiddle.net/7g1vp68b/6/

当标签位于 vue 元素之外时，它可以正常渲染。

Answer 1

Vue 无法解析<style>模板内部。

如果你检查控制台日志，会出现警告：

模板应该只负责将状态映射到 UI。避免在模板中放置具有副作用的标签，例如

，因为它们不会被解析。

您应该放置<style></style>在 Vue 模板之外，或者使用Vue 单文件组件