1. v-text指令
- 作用：设置标签的文本值（textContent）
- 完整代码
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6. <title>Document</title> 7. </head> 8. <body> 9. <div id='app'> 10. <!-- 相当于textContent --> 11. <h2 v-text='message'></h2> 12. <h2 v-text='age'></h2> 13. 14. <!-- 使用差值表达式替换部分内容 --> 15. <h2>{{message}}单身哦！</h2> 16. <h2 v-text='base'>这里不显示哦</h2> 17. 18. <!-- 支持表达式 --> 19. <h2 v-text='base + "!"'>这里不显示哦</h2> 20. 21. 22. </div> 23. <!-- 开发环境版本，包含了有帮助的命令行警告 --> 24. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 25. 26. <script> 27. var app = new Vue({ 28. el:'#app', 29. data:{ 30. message:'大家好，我是测试小白！', 31. age:'今年26岁', 32. base:'辽宁-大连' 33. } 34. 35. }) 36. </script> 37. 38. </body> 39. </html>
2. v-html指令
- 作用：设置元素的innerHTML
- 完整代码
1. <!DOCTYPE html> 2. <html lang="en"> 3. 4. <head> 5. <meta charset="UTF-8"> 6. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7. <title>Document</title> 8. </head> 9. 10. <body> 11. <div id='app'> 12. <!-- 文本时无区别 --> 13. <h2 v-html='mes'></h2> 14. <h2 v-text='mes'></h2> 15. 16. <!-- html标签时有区别 --> 17. <h2 v-html='info'></h2> 18. <h2 v-text='info'></h2> 19. 20. 21. </div> 22. <!-- 开发环境版本，包含了有帮助的命令行警告 --> 23. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 24. 25. <script> 26. var app = new Vue({ 27. el:'#app', 28. data:{ 29. mes:'大家好，我是测试小白！', 30. info:'<a href="https://blog.csdn.net/IT_heima">小白的博客</a>' 31. 32. } 33. 34. }) 35. </script> 36. </body> 37. 38. </html>
3. v-text 和 v-html 区别
- v-html中内容中有html结构会被解析为标签
- v-text指令无论内容是什么，只会解析为文本
- 解析文本使用v-text，需要解析html结构使用V-html
