VUE学习：vue基础03————VUE语法对内容处理：基础插值处理

提示：
本文为VUE栏目：VUE学习：vue基础03————VUE语法对内容处理：基础插值处理

---

前言

本文学习VUE语法对内容的处理。

---

提示：以下是本篇文章正文内容，下面案例可供参考

VUE

VUE语法对内容处理

基础插值处理

插值表达式

数据绑定最常见的形式就是使用双大括号的文本插值：

<p>可不可以{{msg}}</p>		//可不可以不过520
<p>{{msgHtml}}</p>			//<h3>不过那是不行滴</h3>

new Vue({
   el:"#app",
   data:{
      msg:"不过520",
      msgHtml:'<h3>不过那是不行滴</h3>'
   }
});

v-html指令

v-html指令用来向页面渲染HTML标签，等价于innerHTML

<p v-html="msg"></p>		//不过520
<p v-html="msgHtml"></p>	//不过那是不行滴

v-text指令

v-text指令用来向页面渲染文本内容，等价于innerText

<p v-text="msg">可不可以</p>		//不过520
<p v-text="msgHtml"></p>			//<h3>不过那是不行滴</h3>

插值表达式{{}}和v-text指令的区别：v-text会覆盖他所在的整个标签，插值表达式不会

解决插值表达式的闪烁问题使用v-cloak指令