目录
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 秒之后的运行结果：
