Vue：在变量（数据字符串）内渲染 <script> 标签答案

【问题标题】：Vue: render <script> tag inside a variable (data string)Vue：在变量（数据字符串）内渲染 <script> 标签
【发布时间】：2018-10-16 15:30:17
【问题描述】：

我是 Vue.js 的新手

我想在一个变量（数据字符串）中渲染一个脚本标签。

我尝试使用 v-html 指令来执行此操作，但它不起作用没有呈现任何内容

我有什么办法可以做到这一点？

【问题讨论】：

我不完全理解你的问题。你的意思是你有一个字符串变量，其中包含要在另一个 html 标记中呈现的 html/javascript？
你不能通过innerHTML创建一个解析的<script>标签（这是v-html会做的）。 Can scripts be inserted with innerHTML?.

标签： vue.js script-tag

【解决方案1】：

我会在脚本标签上放置一个 v-if 指令并将其内容放入变量中。

<script v-if="script">
  {{script}}
</scrip>

【讨论】：

【解决方案2】：

我认为出于安全考虑，vue 会自动转义您的<script>，没有办法避免这种情况。

无论如何，您可以做的一件事是在created() 生命周期挂钩上使用eval(this.property)。

data: {
  script: 'alert("this alert will be shown when the component is created")'
},
created() {
  eval(this.script)
}

谨慎使用，如vue js docs 中所述，这可能会在您的应用中引发 XSS 攻击

【讨论】：

【解决方案3】：

如果我理解正确，我的答案是：

<template>
  <div>
    {{ strWithScriptTag }}
  </div>
</template>

<script>
export default {
   name: 'Example',

   methods: {
     htmlDecode(input) {
       const e = document.createElement('div')
       e.innerHTML = input
       return e.childNodes[0].nodeValue
     },
   },


  computed: {
     strWithScriptTag() {
       const scriptStr = '&lt;script&gt;https://some.domain.namet&lt;/script&gt;'
       return this.htmlDecode(scriptStr)
     }
   },
}
</script>

【讨论】：

你也可以用lodash的unescape代替htmlDecode(input)。