json数组遍历.html 625 B

123456789101112131415161718192021222324252627282930313233343536
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>json数组遍历</title>
  6. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <ol>
  11. <li v-for="s in sites">
  12. {{ s.name }}
  13. </li>
  14. </ol>
  15. <ol>
  16. <li v-for="c in citys">
  17. {{c}}
  18. </li>
  19. </ol>
  20. </div>
  21. <!-- JavaScript 代码需要放在尾部(指定的HTML元素之后) -->
  22. <script>
  23. new Vue({
  24. el: '#app',
  25. data: {
  26. sites: [
  27. { name: 'Runoob.com' },
  28. { name: 'Google.com' },
  29. { name: 'Taobao.com' }
  30. ],
  31. citys:["上海","南京","北京"]
  32. }
  33. })
  34. </script>
  35. </body>
  36. </html>