json对象遍历3.html 576 B

123456789101112131415161718192021222324252627282930
  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. <ul>
  11. <li v-for="(value, key) in object">
  12. {{ key }} : {{ value }}
  13. </li>
  14. </ul>
  15. </div>
  16. <!-- JavaScript 代码需要放在尾部(指定的HTML元素之后) -->
  17. <script>
  18. new Vue({
  19. el: '#app',
  20. data: {
  21. object: {
  22. name: '菜鸟教程',
  23. url: 'http://www.runoob.com',
  24. slogan: '学的不仅是技术,更是梦想!'
  25. }
  26. }
  27. })
  28. </script>
  29. </body>
  30. </html>