<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>YuigahamaYui</title> </head> <body> <!-- v-text:以文本的方式来插入数据 v-html:以html标签的方式来插入数据 v-text指令和插值表达式的区别 1、v-text指令默认没有插值表达式闪烁的问题 2、插值表达式默认只替换插值表达式的区域,而v-text会替换掉对应标签里面的全部内容 vue的模板中插入数据的方式 a、插值表达式:比如<div>{{msg}}</div> b、vue指令:比如v-html、v-text等等 --> <div id="app"> <!--插值表达式--> <div>+++{{msg}}</div> <div v-text="msg">+++</div> <div>{{msg2}}</div> <div v-text="msg2"></div> <!--以html的方式来插入数据--> <div v-html="msg2"></div> <!-- 无论是在插值表达式还是在vue指令中,都是以js表达式的方式来解析数据 所以js表达式里面能做的操作(比如说调用函数、比如说字符串拼接等等), vue指令和插值表达式里面都能 --> <div>{{msg.toUpperCase()+'呐'}}</div> <div v-text="msg.toUpperCase()+'呐'"></div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> <script> new Vue({ el:'#app', data:{ msg:'我永远喜欢YuigahamaYui', msg2:'<h1 style="color: hotpink">我永远喜欢由比滨结衣</h1>' } }); </script> </body> </html>
效果图: