在vue中什么标签不会被解析html • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

在Vue中，使用双大括号的Mustache语法（{{}}）可以将表达式的结果动态地插入到HTML模板中，进行数据的双向绑定。然而，有些HTML标签在Vue中不会被解析，而是作为纯文本展示出来。

下面是一些在Vue中不会被解析HTML的标签：

<script>标签：Vue不会解析<script>标签中的内容，因为其中可能包含JS代码，直接解析会导致安全问题或代码执行错误。
<style>标签：Vue不会解析<style>标签中的内容，因为其中的CSS样式通常是全局的，使用Vue的组件化开发方式时，每个组件都应该有独立的样式作用域，而不是全局的。
<textarea>标签：Vue不会解析<textarea>标签中的内容，而是把其中的内容作为普通文本展示在页面上，这是因为在Vue中，可以使用v-model指令来实现对输入框的双向绑定，不需要通过直接设置文本内容的方式。
<pre>标签：Vue不会解析<pre>标签中的内容，而是把其中的内容作为普通文本展示在页面上，因为<pre>标签通常用于展示预格式化的文本，如代码片段或其他格式化的文本。

需要注意的是，在以上列举的标签中，虽然Vue不会解析其中的内容，但仍然会把它们作为普通文本插入到HTML模板中，可以通过使用v-html指令来动态地将HTML代码插入到模板中。

总而言之，以上是在Vue中不会被解析HTML的一些标签，它们会被当作普通文本展示在页面上。在使用Vue开发时，遇到需要这些标签的情况，可以通过其他方式或指令来实现相应的功能。

2年前 0条评论

worktile

Worktile官方账号

在Vue中，使用双括号插值表达式（{{ }}）可以将数据动态地渲染到HTML模板中，但是有一些HTML标签是不会被Vue解析的。下面是一些不会被解析的HTML标签：

script标签：Vue默认不会解析script标签中的内容，这是为了防止XSS攻击。如果需要在Vue中使用JavaScript代码，可以使用Vue提供的绑定事件或计算属性等方式来实现。
style标签：Vue不会解析style标签中的内容。如果需要在Vue中应用样式，推荐使用CSS文件或内联style属性。
textarea标签：Vue不会解析textarea标签中的内容。如果需要在Vue中使用文本编辑器，可以使用第三方组件库或自定义组件来实现。
pre标签：Vue不会解析pre标签中的内容，因为pre标签用于展示预格式化的文本，保留原始的空白字符和换行符。如果需要在Vue中显示预格式化的文本，可以使用v-html指令。
code标签：Vue不会解析code标签中的内容，因为code标签通常用于展示代码片段，保留原始的空白字符和换行符。如果需要在Vue中显示代码片段，可以使用v-html指令。

需要注意的是，虽然Vue默认不会解析上述标签中的内容，但可以通过使用Vue提供的特殊的指令或扩展插件来实现对这些标签的解析和处理。

2年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，由于安全性的考虑，默认情况下，用户输入的内容会被解析为纯文本，防止XSS攻击。这意味着一些HTML标签和特殊字符会被转义，不会被解析为HTML。

以下是一些在Vue中不会被解析的HTML标签：

<script>标签：在Vue中，如果直接在模板中使用<script>标签，Vue会将其当作纯文本处理，不会被解析为可执行的脚本。

<template>
  <div>
    <script>alert("This will not be executed!");</script>
  </div>
</template>

<style>标签：与<script>标签类似，Vue不会将模板中的<style>标签解析为样式。

<template>
  <div>
    <style>
      /* This will be treated as plain text */
      h1 {
        color: red;
      }
    </style>
    <h1>This text will not be red</h1>
  </div>
</template>

<textarea>标签：Vue会将<textarea>标签的内容作为纯文本处理，而不是将其作为HTML内容解析。

<template>
  <div>
    <textarea>This is not interpreted as HTML</textarea>
  </div>
</template>

除了上述标签外，还有一些特殊字符也不会在Vue中被解析为HTML，包括{{和}}。这是因为Vue使用双花括号来表示模板中的插值表达式，如果不希望这些特殊字符被解析为HTML，可以使用v-pre指令。

<template>
  <div v-pre>
    {{ This is not interpreted as an interpolation expression }}
  </div>
</template>

需要注意的是，如果我们需要在Vue中插入原始的HTML，可以使用v-html指令。这个指令会将绑定的数据解析为HTML，并将其插入到DOM中。但是要小心使用，因为不正确的使用v-html可能导致XSS攻击。

<template>
  <div v-html="rawHTML"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHTML: "<strong>This will be interpreted as HTML</strong>"
    };
  }
};
</script>

总结：在Vue中，默认情况下，所有用户输入的内容都会被解析为纯文本，可以使用v-html指令将HTML插入到DOM中，而一些特殊的HTML标签（如<script>和<style>）以及特殊字符（如{{和}}）不会被解析为HTML。

2年前 0条评论