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>
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.js
原文地址：https://www.cnblogs.com/yanxiatingyu/p/9459419.html
时间： 2024-10-07 18:51:25