5.vue的数据绑定指令.html 1.1 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. 内置指令:
  11. 1.数据绑定的指令
  12. a.v-text 更新数据文本内容 innerText
  13. b.v-html 更新文本内容 innerHTML 可以解析html标签
  14. c.v-model 数据改变 视图更新 / 视图更新 数据改变 数据双向绑定
  15. 适用于表单里的内容
  16. -->
  17. <div id="app">
  18. <div v-text="text1">{{text}}</div>
  19. <div v-html="html1">{{html}}</div>
  20. <input type="text" v-model="input1">
  21. 输入值:{{input1}}
  22. </div>
  23. <script src="../vue.js"></script>
  24. <script>
  25. var app = new Vue({
  26. el:"#app",
  27. data:{
  28. text: "文字1",
  29. html: "文字2",
  30. text1:"<b>今天天气真好</b>",
  31. html1: "<b>开学了</b>",
  32. input1: ""
  33. },
  34. methods: {
  35. },
  36. })
  37. </script>
  38. </body>
  39. </html>