目录
Vue文本插值
v-text
v-text介绍
v-text 与插值表达式的使用场景及性能解析
v-html
v-html介绍
文本插值、v-text、v-html区别
Vue文本插值
最基础的数据绑定形式即为文本插值，其运用的是双大括号（也就是“Mustache”）这种语法。
示例代码如下：
<!-- 在head中引入vue.js --> <script src="./js/vue.global.js"></script> <!-- body部分 --> <body> <div id="app"> <p>------{ {msg}}------</p> <p>{ {msg}}</p> <p>{ {msg.toUpperCase()}}</p> <p>{ {msg.toLowerCase()}}</p> </div> <script> const app=Vue.createApp({ data(){ return{ msg:'MuSTachE' } }, mounted(){ this.changeData(); }, methods:{ changeData(){ setTimeout(()=>{ this.msg='VuE.js'; },5000); } } }) app.mount('#app'); </script> </body>
在这里，双大括号标签将会被替换成相应组件实例里（例如 msg）属性所对应的值。并且，每当（例如 msg）属性发生改变时，它也会同步进行更新。
运行结果：
而在 5 秒之后的运行结果：
