Vue指令大全里有哪些长尾词用法？

本文共计2207个文字，预计阅读时间需要9分钟。

1. 使用 `v-text` 更新 `textContent`，功能等同于 JS 的 `text` 属性。 - 示例：`` 与 `{{msg}}` 等价。

2. `v-` 双大括号形式会将数据解释为纯文本，而非 HTML。 - 为输出真正的 HTML，应避免使用 `v-`。

1. v-text

v-text主要用来更新textContent，可以等同于JS的text属性。

<span v-text="msg"></span>

这两者等价：

<span>{{msg}}</span>

2. v-html

双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。

<div v-html="rawHtml"></div>

这个div的内容将会替换成属性值rawHtml，直接作为HTML进行渲染。

3. v-pre

v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。