带索引的循环，为什么不对？

最新推荐文章于 2024-09-15 17:15:28 发布

hamimelon2020

最新推荐文章于 2024-09-15 17:15:28 发布

阅读量54

点赞数

分类专栏： JavaScript vue 文章标签： Vue li元素数据绑定组件列表渲染

本文链接：https://blog.csdn.net/weixin_40945354/article/details/120058402

版权

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>

<body>
<div id="app">
<p v-for="(index, book) in books">{{ index }}.{{ book.title }}</p>
</div>



<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
       books:
       [
         {index:0, title: 'Java无难事'},
         {index:1, title: 'Java无难事'},
         {index:2, title: 'Java无难事'},
       ]
     }
   }
 }).mount('#app')

  </script>
</body>

</html>

小改，不是对的

<!DOCTYPE html>

<body>
<div id="app">
  <ul>
    <li>
<p v-for="(index, book) in books">{{ index }}.{{ book.title }}</p>
  </li>
</ul>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
       books:
       [
         {index: 0, title: 'Java无难事'},
         {index: 1, title: 'Java无难事'},
         {index: 2, title: 'Java无难事'},
       ]
     }
   }
 }).mount('#app')

  </script>
</body>

</html>

p和li有啥区别

<!DOCTYPE html>

<body>
<div id="app">
  <ul>
    <li>
<p v-for="(book, index) in books">{{ index }}.{{ book.title }}</p>
  </li>
</ul>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
       books:
       [
         {index: 0, title: 'Java无难事'},
         {index: 1, title: 'Java无难事'},
         {index: 2, title: 'Java无难事'},
       ]
     }
   }
 }).mount('#app')

  </script>
</body>

</html>

li也要循环。

<!DOCTYPE html>

<body>
<div id="app">
  <ul>
<li v-for="(book, index) in books">{{ index }}. {{ book.title }}</p>
  </li>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
       books:
       [
         {index: 0, title: 'Java无难事'},
         {index: 1, title: 'VC++深入详解'},
         {index: 2, title: 'Servlet/JSP深入详解'},
       ]
     }
   }
 }).mount('#app')

  </script>
</body>

</html>

没有空格了

<!DOCTYPE html>

<body>
<div id="app">
  <ul>
<li v-for="(book, index) in books">{{ index }}. {{ book.title }}
  </li>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
 const vm = Vue.createApp({
   data() {
     return {
       books:
       [
         {index: 0, title: 'Java无难事'},
         {index: 1, title: 'VC++深入详解'},
         {index: 2, title: 'Servlet/JSP深入详解'},
       ]
     }
   }
 }).mount('#app')

  </script>
</body>

</html>