Advertisement

02-Vue列表的展示(v-for)

阅读量:

内容小结:

如果直接输出数组,输出会与定义一样,带有[]

为了输出列表,需要ul与li标签

因为数组有多个元素,为了遍历元素,引入了vue-for

< li v-for="item in movies">{{item}}

源代码:

复制代码
 <!DOCTYPE html>

    
 <html lang="en">
    
 <head>
    
     <meta charset="UTF-8">
    
     <title>Title</title>
    
 </head>
    
 <body>
    
  
    
 <div id="app">
    
     <ul>
    
         <li v-for="item in movies">{{item}}</li>
    
     </ul>
    
 </div>
    
  
    
 <script src="../js/vue.js"></script>
    
 <script>
    
     const app=new Vue
    
     (    {
    
         el:"#app",
    
         data:{
    
             message:"你好啊",
    
             movies:["少年派","辛格勒的名单","小萝莉的猴神大叔"]
    
         }
    
  
    
     })
    
  
    
 </script>
    
  
    
  
    
 </body>
    
 </html>
    
    
    
    
    html
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-08-18/I1Dap08scMoZBArG5XSLdxhkf2tJ.png)

效果:

eeb5615a6c0546b199d4c45d36776b1d.png
477a38f2f80c4ba19a8b83df25035bb8.png
d100766a525d453f895012cb1018372a.png

全部评论 (0)

还没有任何评论哟~