5.vue中内置指令.html 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839
  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. <!--
  10. 内置指令: v-xxx
  11. 1.数据绑定的指令
  12. a. v-text 更新文本内容 innerText
  13. b. v-html 更新文本内容 innerHTML 解析内容标签
  14. c. v-model 常用于表单模板: 输入框
  15. 视图 -> 数据
  16. 数据 -> 视图
  17. -->
  18. <div id="app">
  19. <div v-text="text1">{{text1}}</div>
  20. <div v-html="html1">{{html1}}</div>
  21. <input type="text" v-model="input1">
  22. </div>
  23. <script src="./vue.js"></script>
  24. <script>
  25. var app = new Vue({
  26. el:"#app",
  27. data:{
  28. text1:"<b>这是一段text内容</b>",
  29. html1:"<b>这是一段html内容</b>",
  30. input1: "我的"
  31. },
  32. methods: {
  33. },
  34. })
  35. </script>
  36. </body>
  37. </html>