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

Question

示例：

  var vm = new Vue（{
  el：“＃app”，
  数据：{
    名称：“鲍勃”
  }
}） 

  

  您好{{name}}
  <样式>
  身体{颜色：蓝色； }
  
  

JS Fiddle： https://jsfiddle.net/7g1vp68b/6/

当标签位于vue元素之外时，它会显示正常。

Answer 1

Vue无法解析模板中的<style>。

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

  

模板仅应负责将状态映射到UI。   避免在模板中放置带有副作用的标签，例如   ，因为它们不会被解析。

您应将<style></style>放在Vue模板之外，或使用Vue single file component