Vue 数组 字典 template v-for 的使用
Posted yanxiatingyu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 数组 字典 template v-for 的使用相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="vue.css"> 7 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> 8 </head> 9 <body> 10 <div id="vue-app"> 11 <h1> v-for 循环</h1> 12 <!--数组下标--> 13 {{ characters[0] }} 14 {{ characters[1] }} 15 {{ characters[2] }} 16 <!--数组遍历--> 17 <ul> 18 <li v-for="character in characters"> 19 {{character}} 20 </li> 21 </ul> 22 <hr> 23 <ul> 24 <li v-for="user in userMsg" style="list-style: none;"> 25 {{ user }} - {{ user.name }} - {{ user.age }} 26 </li> 27 </ul> 28 <hr> 29 30 <ul><!-- index 默认其实位置是：0 --> 31 <li v-for="(user,index) in userMsg" style="list-style: none;"> 32 {{ index }} - {{ user.name }} - {{ user.age }} 33 </li> 34 </ul> 35 <h3><使用 div+v-for/h3> 36 <div v-for="(user,index) in userMsg" > 37 <h3>{{ index+1 }} . {{ user.name }}</h3> 38 <p> Age: {{ user.age }}</p> 39 </div> 40 <hr> 41 <h3>使用template+v-for</h3> 42 <template v-for="(user,index) in userMsg"> 43 <h3>{{ index+1 }}.{{ user.name }}</h3> 44 <p> Age:{{ user.age }}</p> 45 </template> 46 以上两种情况 有什么不同？ 47 查看html便知 48 49 <h3>使用template+v-for 再加 内 循环 v-for</h3> 50 <template v-for="(user,index) in userMsg"> 51 <div v-for="(value,key) in user"> 52 {{ key }}-{{ value }} 53 </template> 54 </div> 55 56 <script src="app.js"></script> 57 </body> 58 </html>
1 new Vue({ 2 el:‘#vue-app‘, 3 data:{ 4 characters:[‘Mario‘,‘Luffy‘,‘Yoshi‘], 5 userMsg:[ 6 {name:"Henry",age:30}, 7 {name:"Bucky",age:30}, 8 {name:"Emily",age:30}, 9 ], 10 }, 11 methods:{ 12 13 }, 14 computed:{ 15 16 } 17 })
以上是关于Vue 数组 字典 template v-for 的使用的主要内容，如果未能解决你的问题，请参考以下文章