当前位置:首页 > vue中用v-for渲染多层数据结构

vue中用v-for渲染多层数据结构

发布于 2019-06-12 阅读 80 次 Vue
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. </head>
  6. <body>
  7. <div id="App">
  8. <ul class="nav">
  9. <li v-for="(item,indexs) in items" >
  10. <a href="##" :title="item.title"></a>
  11. <ol :ref="item.title">
  12. <li v-for="(list,index) in item.children" :class="list.class">
  13. <a :href="list.url" :title="list.list" :key="list.time" @click.prevent="changeCont(list.time,$event)">{{ list.text }}</a>
  14. </li>
  15. </ol>
  16. </li>
  17. </ul>
  18. </div>
  19. <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  20. <script>
  21. var app=new Vue({
  22. el: '#App',
  23. data: {
  24. books: [
  25. {
  26. type: 'program',
  27. lists: [
  28. {
  29. author: 'A',
  30. date:''
  31. }
  32. ]
  33. }
  34. ]
  35. }
  36. })
  37. </script>
  38. </body>
  39. </html>