vue + element ui 展示＜script＞＜/script＞标签

原创于 2020-09-25 13:36:43 发布 · 920 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #页面展示html标签

本文介绍了一位Vue初学者尝试在页面上直接展示JS代码时遇到的问题及解决方法。通过转义字符修正了字符串中的HTML标签，避免了浏览器解析为实际的脚本。

vue小白，想要在页面展示一行js代码，就直接把哪行代码赋值了，如下：

<el-input
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="textarea">
</el-input>
 
<script>
export default {
  data() {
    return {
      textarea: '<script>console.log("111111") </script>'
    }
  }
}
</script>

然而，报错了！！！

错误信息是：

Unterminated string literal.

百度翻译一下：

未终止的字符串文本。

然后请教大佬，大佬说把反斜杠转义一下就OK了

下面是正确代码

<el-input
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="textarea">
</el-input>

<script>
export default {
  data() {
    return {
      textarea: '<script>console.log("111111") <\/script>'
    }
  }
}
</script>

以防忘记，记录一下，希望能帮到大家