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>