1. v-text
v-text 主要用来更新元素 textContent:
<span v-text="msg"></span>
![](https://img.haomeiwen.com/i11463255/285b1e41ac07effd.png)
2. v-html
v-html 与 v-text 区别在于:v-text 输出的是纯文本,而 v-html 会将其当 html 标签解析后再输出:
<div v-html="html"></div>
![](https://img.haomeiwen.com/i11463255/573062e2a9dd4aba.png)
3. v-pre
v-pre 主要用来跳过这个元素和它的子元素编辑过程:
<h1 v-pre>{{ msg }}</h1>
![](https://img.haomeiwen.com/i11463255/f66583abad255489.png)
4. v-cloak
v-cloak 主要用来保持在元素上直到关联实例结束时再进行编译:
<div id="app" v-cloak>
<div>{{ msg }}</div>
</div>
若没有 v-cloak,会先编译 <div>{{ msg }}</div>,页面加载时会闪烁。
![](https://img.haomeiwen.com/i11463255/b2084024f70c0b24.png)
5. v-once
v-once 主要用来执行一次性插值,当数据改变时,插值处的内容不会更新:
<h2 v-once>{{ msg }}</h2>
![](https://img.haomeiwen.com/i11463255/34c8dd6bae3c47c2.png)
网友评论