el-input textarea 解析html标签

要在 el-input 或 textarea 中解析 HTML 标签，您可以使用 Vue.js 中的 v-html 指令。v-html 指令可以将原始 HTML 字符串渲染为实际的 HTML 内容。以下是一个示例：

<template>
  <div>
    <el-input v-model="inputHtml" type="textarea"></el-input>
    <div v-html="inputHtml"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputHtml: '<h1>Hello, <span style="color: red;">World!</span></h1>'
    }
  }
}
</script>

在上面的示例中，我们使用 v-model 指令将输入框的值绑定到 inputHtml 数据属性上。然后，我们使用 v-html 指令将 inputHtml 的值渲染为实际的 HTML 内容。

这样，当您在输入框中输入包含 HTML 标签的字符串时，它们将被正确解析和渲染在 div 元素中。请注意，要确保输入的内容是安全的，以避免跨站脚本攻击（XSS）漏洞。

相关问题

el-input解析html语句

el-input是Element UI库中的一个输入框组件，用于接收用户输入。它默认会对用户输入的内容进行转义，即将HTML标签转换为实体字符，防止XSS攻击。

如果你希望el-input能够解析HTML语句并正确渲染，你可以通过设置它的属性type为"textarea"，然后使用v-html指令来绑定一个包含HTML代码的变量。例如：

<el-input type="textarea" :value="htmlContent" v-html="htmlContent"></el-input>

在这个例子中，htmlContent是一个包含HTML代码的变量，它会被解析并渲染在el-input中。需要注意的是，使用v-html指令可能存在安全风险，因此在使用时要确保输入的内容是可信的，或者进行必要的安全过滤处理。

希望这个回答能够帮助到你！如果你还有其他问题，请继续提问。

el-input 加上v-html标签转义后无法输入

el-input 加上 v-html 标签后会将输入的内容作为 HTML 解析，因此无法输入。如果需要输入 HTML 标签，可以使用 el-textarea 组件，并设置 :autosize="{minRows: 2,maxRows: 4}" 属性来自适应高度。例如：

el-form-item label="输入框">
  <el-textarea v-model="inputValue" :autosize="{minRows: 2,maxRows: 4}"></el-textarea>
</el-form-item>