test3.html 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <html>
  2. <title>test1</title>
  3. <<head>
  4. <!-- 开发环境版本,包含了用帮助的命令行警告 -->
  5. <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
  6. <!-- 生产环境版本,优化了尺寸和速度 -->
  7. <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  8. </head>
  9. <body>
  10. <div id="app-3">
  11. <p v-if="seen">现在你看到我了</p>
  12. </div>
  13. <div id="app-4">
  14. <ol>
  15. <li v-for="todo in todos">
  16. {{ todo.text }}
  17. </li>
  18. </ol>
  19. </div>
  20. </body>
  21. <script>
  22. var app3 = new Vue({
  23. el: '#app-3',
  24. data: {
  25. seen: true
  26. }
  27. })
  28. var app4 = new Vue({
  29. el: '#app-4',
  30. data: {
  31. todos: [
  32. { text: '学习 JavaScript' },
  33. { text: '学习 Vue' },
  34. { text: '整个牛项目' }
  35. ]
  36. }
  37. })
  38. </script>
  39. </html>