v-text指令

数据绑定

语法

v-text="msg"

• 'msg'为表达式
• 与双大括号语法的功能类似

作用

• 当 Vue 实例的 message 属性改变时，更新该 div 元素的 textContent
• 取代双大括号语法

基本用法

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

v-html指令

语法

<div v-html="rawHtml"></div>

作用

• 更新元素的innerHTML
• 在html标签内写入的内容都会被当做 HTML, 不再是文本内容

基本用法

<div id='app'>
<p v-html='<myContext>'></p>
</div>
var app = new Vue({
    el: 'app',
    data: {
        myContext: "<h1>html标签会被解析为真正的html</h1>"    
    }
});

小结

比较v-text, v-html和双花括号的区别

• v-text="text"：将数据解析为文本内容, 不能输出真正的html，与花括号的区别是在页面加载时不显示双花括号

• `：将数据解析为文本内容，不能输出真正的html，在页面加载时显示双花括号，所以通常使用v-text`代替

• v-html="html"：如果内容有html标签,将解析为真正的html

<div id="app">
　　<p>{{message}}</p> <!-- 输出：<span>通过双括号绑定,html标签不会解析</span> -->
　　<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
　　<p v-text="text"></p> <!-- 输出：<span>html标签不会解析</span> -->
</div>
<script>
　　var app = new Vue({
　　  el: "#app",
　　  data: {
　　　　  message: "<span>通过双括号绑定, html标签不会解析</span>",
　　　　  html: "<span>html标签在渲染的时候被解析</span>",
　　　　  text: "<span>html标签不会解析</span>",
　　}
});
</script>

v-cloak指令

语法

v-cloak

• 不需要表达式

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

在css添加以下代码

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

基本用法

在双花括号语法中写入变量, 在页面加载时会花括号会一直显示

  <p>{{ msg }}</p>

v-cloak 可以解决这一问题，在 css 中加上

[v-cloak] {
  display: none;
}

在 html 的父容器中加上 v-cloak，就可以解决这一问题

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