Vue的列表渲染指令

港控/mmm° 2023-10-18 08:53 4阅读 0赞

### 列表渲染指令 v-for ###

当需要将一个数组便利或者枚举一个对象循环显示时，就会用到列表渲染指令 v-for。

它的表达式需要结合in 来使用，类似于item in items的形式。

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>Vue内置指令</title>
     </head>
     <body>
      <div id="app">
      <ul>
       <li v-for="book in books">{
       {book.name}}</li>
      </ul>
     </div>
    
    
    <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script>
     var app= new Vue({
      el:'#app',
      data:{
       books:[
        {name:'《书本1》'},
        {name:'《书本2》'},
        {name:'《书本3》'}
       ]
      }
     })
    </script>
     </body>
    </html>

![Image 1][]  
![70][]

在表达式中，books是数据，book是当前元素的别名，循环出的每个<li>元素内的元素都可以访问到

对应的当前数据book

列表渲染也支持用of 代替in 作为分隔符

v-for的表达式支持一个可选参数作为当前项的索引：

<div id="app">
      <ul>
       <li v-for="(book,index) in books">{
       {index}}-{
       {book.name}}</li>
      </ul>
     </div>
    
    
    <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
    <script>
     var app= new Vue({
      el:'#app',
      data:{
       books:[
        {name:'《书本1》'},
        {name:'《书本2》'},
        {name:'《书本3》'}
       ]
      }
     })
    </script>

![70 1][]

除了数组外，对象的属性也是可以遍历的：

<div id="app1">
      <ul>
       <span v-for="value in user">{
       {value}}<br></span>
      </ul>
     </div>
    
    var app1= new Vue({
      el:'#app1',
      data:{
       user:{
        name:'badao',
        age:22,
        tel:11111111
       }
      }

![Image 1][]

![70 2][]

v-for还可以迭代整数：

<div id="app3">
      <span v-for="n in 10">{
       {n}}</span>
     </div>
    
    var app3 = new Vue({
      el:'#app3'
     })

![Image 1][]

![70 3][]

[Image 1]: 
[70]: https://img-blog.csdn.net/20180916211246715?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180916211335465?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180916211410407?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://img-blog.csdn.net/20180916211439929?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70