笔记本

指令

v-text

  • 预期：string
  • 详细：更新元素的 textContent。如果要更新部分的 textContent，需要使用 插值。
  • 示例：
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
1
2
3

v-html

  • 预期：string
  • 详细：更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。 如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
  • 示例：
<div v-html="html"></div>
1

v-show

  • 预期：any
  • 详细：根据表达式之真假值，切换元素的 display CSS property。当条件变化时该指令触发过渡效果。
  • 示例：
<h1 v-show="ok">Hello!</h1>
1

v-if

  • 预期：any

  • 用法：根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 如果元素是 <template>，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。

  • 示例：

<h1 v-if="awesome">Vue is awesome!</h1>
1

提示

当和 v-for 一起使用时，v-for 的优先级比 v-if 更高。