vue.js - 在el-input type="textarea"上使用v-html 样式丢失?

Question

后端返回的数据里包含标签,需要解析标签后进行展示。因为展示实在多行文本框里展示 直接使用v-html，多行文本框样式也丢失了。

想到在插槽中展示,没找到el-input type="textarea"的插槽.

---

Answer 1

可以看看v-html 里面的内容是什么吗,理论上textarea 肯定是不支持v-html, 你直接<div v-html='dataModel'></div> 就行了

Answer 2

作为内容，但是需要解析渲染的 HTML 片段，叫做“富文本”。
对于富文本：

• 如果只需要展示，不允许编辑的话，应直接使用普通块元素标签(比如 div)包含，不应使用 input/textarea 。

• 如果需要允许用户编辑的话，最好使用富文本编辑器。

  AI 建议的方向值得考虑。

Answer 3

不建议使用v-html很不安全 想要换行的话 还是v-model绑定
把所有的< /br>标签替换成\n

Answer 4

这个问题似乎是在尝试使用 Vue.js 和 Element UI 库来解析和展示包含 HTML 标签的数据。如果在 el-input 组件上直接使用 v-html，样式可能会丢失，因为 v-html 只会解析 HTML，但不会应用任何样式。

如果你需要在多行文本框中展示带有 HTML 标签的数据，并且希望应用样式，你可能需要使用一个库，如 "vue-monaco-editor"，它提供了一个更强大的文本编辑器组件，可以解析 HTML 并应用样式。

这是一个基本的示例，假设你已经安装了 vue-monaco-editor：

<template>  <div>    <monaco-editor       v-model="value"       :options="options"       :language="language"       ref="monaco"    ></monaco-editor>  </div></template><script>import { MonacoEditor } from 'vue-monaco-editor'import 'monaco-editor/min/vs/editor/editor.main.css'export default {  components: {    MonacoEditor,  },  data() {    return {      value: '',      options: {        // Customize options here      },      language: 'html', // Set the language to HTML    }  },  mounted() {    // Fetch your data from the server and set it to `value` when it's available.  },}</script>

在这个例子中，v-model="value" 绑定了编辑器的值，你可以从服务器获取数据并设置到 value 中。options 可以用来定制编辑器的行为和样式，而 language 设置编辑器的语言为 HTML。当你在编辑器中输入或粘贴带有 HTML 的文本时，它将解析和样式化这些标签。