VUE课程---6、v-text和v-html指令
一、总结
一句话总结：
v-text：以文本的方式来插入数据
v-html：以html标签的方式来插入数据
<div v-text="msg"></div> <div v-html="msg2"></div>
1、v-text指令和插值表达式的区别？
1、v-text指令默认没有插值表达式闪烁的问题
2、插值表达式默认只替换插值表达式的区域，而v-text会替换掉对应标签里面的全部内容
2、vue的模板中插入数据的方式？
a、插值表达式：比如<div>{{msg}}</div>
b、vue指令：比如v-html、v-text等等
二、v-text和v-html指令
博客对应课程的视频位置：6、v-text和v-html指令
https://www.fanrenyi.com/video/26/223
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-text和v-html指令</title> 6 </head> 7 <body> 8 <!-- 9 v-text：以文本的方式来插入数据 10 v-html：以html标签的方式来插入数据 11 12 v-text指令和插值表达式的区别 13 1、v-text指令默认没有插值表达式闪烁的问题 14 2、插值表达式默认只替换插值表达式的区域，而v-text会替换掉对应标签里面的全部内容 15 16 17 vue的模板中插入数据的方式 18 a、插值表达式：比如<div>{{msg}}</div> 19 b、vue指令：比如v-html、v-text等等 20 21 --> 22 <div id="app"> 23 <!--插值表达式--> 24 <div>+++{{msg}}</div> 25 <div v-text="msg">+++</div> 26 27 <div>{{msg2}}</div> 28 <div v-text="msg2"></div> 29 30 <!--以html的方式来插入数据--> 31 <div v-html="msg2"></div> 32 33 <!-- 34 无论是在插值表达式还是在vue指令中，都是以js表达式的方式来解析数据 35 所以js表达式里面能做的操作（比如说调用函数、比如说字符串拼接等等）， 36 vue指令和插值表达式里面都能 37 --> 38 <div>{{msg.toUpperCase()+'bb'}}</div> 39 <div v-text="msg.toUpperCase()+'cc'"></div> 40 </div> 41 <script src="../js/vue.js"></script> 42 <script> 43 new Vue({ 44 el:'#app', 45 data:{ 46 msg:'欢迎来到vue的世界', 47 msg2:'<h1>这是一个v587的h1标签</h1>' 48 } 49 }); 50 </script> 51 </body> 52 </html>
