2_vtext_vhtml.html 837 B

1234567891011121314151617181920212223242526272829
  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. <script src="./js/vue.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11. {{message}}
  12. {{str}}
  13. <!-- vue中有许多指令可以实现特定功能 v- 开头的一般都是vue指令 -->
  14. <!-- v-html 指令 可以将字符串转换为 html 标签 类似 innerHTML -->
  15. <div v-html="str"></div>
  16. <!-- v-text 指令 可以将字符串转换为文本内容 类似 innerText -->
  17. <div v-text="str"></div>
  18. </div>
  19. <script>
  20. new Vue({
  21. el:"#app",
  22. data:{
  23. message:"hello Vue!",
  24. str:"<h1>hello Vue!</h1>"
  25. }
  26. })
  27. </script>
  28. </body>
  29. </html>