04 vue 文本显式相关的指令

6/27/2021 vue

API - 指令 — Vue.js (opens new window)

# mustache 语法

模板语法 — Vue.js (opens new window)

# v-once

只渲染元素和组件一次

API — v-once (opens new window)

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

# v-html

内容按普通 HTML 插入(会进行 html 解析)

API — v-html (opens new window)

模板语法 原始 HTML — Vue.js (opens new window)

# v-text

API — v-text (opens new window)

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

# v-pre

原样显式,不做解析

API — v-pre (opens new window)

<span v-pre>{{ this will not be compiled }}</span>

# v-cloak

不会显示,直到编译结束。(需要自定义样式。)

使用模版编译不用使用这个

API — v-cloak (opens new window)

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>
更新时间: Sunday, June 27, 2021 15:46