Vue 列表渲染

我们写的页面需要记录图书的列表

// 我们用普通方法写

<ol>
   <li>《撒哈拉的故事》</li>
   <li>《活着》</li>
   <li>《围城》</li>
   <li>《哈利波特》</li>
</ol>

浏览器显示:

我们在用vue提供的列表渲染来完成这个例子

<ol id="books-list">
    <li v-for="site in sites">
      {{site.book}}
    </li>
  </ol>
  <script>
   new Vue({
     el:"#books-list",
     data:{
       sites:[
         {book:"《撒哈拉的故事》"},
         {book:"《活着》"},
         {book:"《围城》"},
         {book:"《哈利波特》"}
       ]
     }
   })
  </script>

浏览器显示:

 在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

我们拥有对父作用域属性的完全访问权限？首先来解释一下这句话:

<ol id="books-list">
    <li v-for="(site, index) in sites">
        // 在这里就是vue的子作用域在这里我们可以取到父作用域的 site以及index
      {{site.book}}
    </li>
  </ol>
  <script>
   new Vue({
     el:"#books-list",
     data:{
       sites:[
         {book:"《撒哈拉的故事》"},
         {book:"《活着》"},
         {book:"《围城》"},
         {book:"《哈利波特》"}
       
       ]
     
     }
   })
  </script>

(首先上述内容有可能有误,欢迎指正)

 

而index就是 第二个参数---索引值

<ul id="books-list">
    <li v-for="(site, index) in sites">
      {{index}}-{{site.book}}
    </li>
  </ul>
  <script>
   new Vue({
     el:"#books-list",
     data:{
       sites:[
         {book:"《撒哈拉的故事》"},
         {book:"《活着》"},
         {book:"《围城》"},
         {book:"《哈利波特》"}
       
       ]
     
     }
   })
  </script>

（为了更容易看出index的功能我把ol换成了 ul标签）

浏览器显示:

 

 

 

当然我们还可以用of代替in 因为这是最接近JavaScript迭代器的语法

 <li v-for="(site, index) of sites">




一个对象的object

<ul id="v-for-object">
    <li v-for="value in object">
      {{author}}-{{value}}
    </li>
 </ul>
 <script>
   new Vue({
     el:"#v-for-object",
     data:{
       author:"作者",
       object:{
          "三毛":"《撒哈拉的故事》",
          "余华":"《活着》",
          "钱钟书":"《围城》",
          "J·K·罗琳":"《哈利波特》" 
       }     
     }
   })

显示如下:

要把作者的名字也打印出来,需要添加第二个参数 key

  <li v-for="(value, key) in object">
        {{author}}-{{key}}-{{value}}
  </li>

显示如下

 

但第三个参数是什么呢？没错！就是索引,最终的页面