Question

我是Vue.js的新手

我想在变量（数据字符串）中呈现脚本标签。

我尝试向我们提供v-html指令来执行此操作，但是它没有用

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

Answer 1

我认为，出于安全考虑，<script>会自动转义，因此无法避免。

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

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

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

Answer 2

我将在脚本标记上放置v-if指令，并将其内容放入变量中。

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

Answer 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>

Vue：在变量（数据字符串）中呈现<script>标签

3 个答案: