Vue-常用系统指令v-cloak、v-text、v-html 的使用详解

Vue 常用系统指令

v-cloak

• 该指令不需要 表达式，可以解决插值表达式 闪烁 问题。

• 这个指令会在 Vue 实例编译结束时，从绑定的 HTML 元素上移除；该指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

  CSS:

  /*通过属性选择器设置其隐藏*/
  [v-cloak] {
  	display: none;
  }
  

  HTML:

  <div id="app">
      <h2 v-cloak>{{ msg }}</h2>
  </div>
  

  JS:

  var vm = new Vue({
      el: "#app",
      data: {
          msg: 'v-cloak'
      }
  })
  

v-text

• 可以将一段文本渲染到指定的元素中，类似于 innerText ，不会解析文本中的标签。

• 与插值表达式不同，该指令渲染的数据会覆盖原本的内容。

• v-text 指令只能在双标签中使用，没有闪烁问题。

  <p v-text="msg">这里的内容会被覆盖</p>
  

  注： 使用 vue 指令时，插值表达式的 “{{}}” 需要省略。

v-html

• 将一段文本渲染到指定的元素中，其中的内容会被当做 HTML 进行解析，若没有 HTML 则与 v-text 和 “{{}}” 作用相同。

• 插值表达式和 v-text 会将数据解释为纯文本，而非 HTML 。

  <p v-html="msg">这里的内容会被覆盖</p>