Vue,v-for循环遍历方式 - 我1我1我1
Vue,v-for循环遍历方式
v-for循环遍历方式
1.v-for循环普通数组
item是自定义名称， in后面加的是 list这个普通数组
1 <!DOCTYPE html>2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <script src="../js/vue.js"></script>
8 <body>
9 <div id="app">
10 <p>{{ list }}</p>
11
12 <p v-for="item in list">{{ item }}</p>
13
14 <p v-for="(item,i) in list"> 索引值:{{ i }} --- 每一项:{{ item }}</p>
15 </div>
16 </body>
17 </html>
18 <script>
19 var vm = new Vue({
20 el:\'#app\',
21 data:{
22 list:[1,2,3,4,5,6]
23 },
24 methods:{
25
26 }
27 })
28 </script>
效果图
2.v-for循环对象数组
1 <!DOCTYPE html>2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <script src="../js/vue.js"></script>
8 <body>
9 <div id="app">
10
11 <!-- 不一定非用item， 可以换 -->
12 <p v-for="user in list">{{ user.id }} --- {{user.name}}</p>
13
14 =======================================================================
15
16 <p v-for="(user,i) in list">Id:{{user.id}} --- name:{{user.name}} --- 索引:{{i}}</p>
17 </div>
18 </body>
19 </html>
20 <script>
21 var vm = new Vue({
22 el:\'#app\',
23 data:{
24 list:[
25 {id:1,name:\'aa\'},
26 {id:2,name:\'bb\'},
27 {id:3,name:\'cc\'},
28 {id:4,name:"dd"}
29 ]
30 },
31 methods:{}
32 })
33 </script>
效果图
3.v-for循环对象
demo因为没有写下方的（val, key, i），所以只能遍历出val， 不能遍历出key和i
其实这个demo就是val，只不过写法不一样
1 <!DOCTYPE html>2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <script src="../js/vue.js"></script>
8 <body>
9 <div id="app">
10
11 <p v-for="demo in user"> demo:{{ demo }} </p>
12
13 ====================================
14 <!-- 键值对的形式 -->
15 <!-- 注意： 在遍历对象身上的键值对的时候， 除了 有 val key ，在第三个位置还有 一个 索引 i -->
16 <p v-for="(val, key, i) in user"> 值 val:{{ val }} --- 键 key:{{ key }} --- 索引 i:{{ i }}</p>
17 </div>
18 </body>
19 </html>
20 <script>
21 var vm = new Vue({
22 el:\'#app\',
23 data:{
24 user: {
25 id: 1,
26 name: \'哈哈\',
27 sex: \'男\'
28 }
29 }
30 })
31 </script>
效果图
4.v-for迭代数字
因为直接循环的 p标签里的数字10，所以data里不需要写数字
1 <!DOCTYPE html>2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <script src="../js/vue.js"></script>
8 <body>
9 <div id="app">
10 <!-- in 后面我我们放过 普通数组，对象数组，对象， 还可以放数字 本次放的就是数字10 -->
11 <!-- 注意 ： 如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
12 <p v-for="count in 10"> 这是第 {{ count }} 次循环</p>
13 </div>
14 </body>
15 </html>
16 <script>
17 var vm = new Vue({
18 el:\'#app\',
19 data:{},
20 methods:{}
21 })
22 </script>
效果图
2019-06-10 16:14:44
以上是 Vue,v-for循环遍历方式 - 我1我1我1 的全部内容， 来源链接： utcz.com/z/375872.html
