v-for循环分为三种:整数循环、数组循环和对象循环

作用 : 控制HTML元素中的循环,实现语句列表的生成

用法 : v-for = “item in items”或 v-for = “item of items”,其中item指集合的子项,items指被遍历的元素,通常为数组

用处 : 写在谁上边,谁遍历

整数循环

举例-1 :

<div class="box">
    <ol>
        <li v-for="n in 5">{{n}}</li>
    </ol>
</div>
<script>
new Vue({
  el:".box"
})
</script>
运行结果:
举例-2 : 可以动态传入需要循环的整数的个数

<div class="box">
    <ol>
        <li v-for="n in nums">{{n}}</li>
    </ol>
</div>
<script>
new Vue({
  el:".box",
  data:{
    nums:5
  }
})
</script>

运行结果:

数组循环
举例-1 : 可以使用of代替in来使用
<div class="box">
    <ol>
        <li v-for="item of items">{{item}}</li>
    </ol>
</div>
<script>
new Vue({
  el:".box",
  data:{
    items:["Smith","David","Jassic","Lucy"]
  }
})
</script>

运行结果:


举例-2 : 可以有第二个可选参数作为当前项的索引值

<div class="box">
    <ul>
        <li v-for="(item,index) of items">当前索引:{{index}},当前项:{{item}}</li>
    </ul>
</div>
<script>
new Vue({
  el:".box",
  data:{
    items:["Smith","David","Jassic","Lucy"]
  }
})
</script>

运行结果:


对象循环

举例-1 : 默认循环遍历value的值

<ul id="app3" class="demo">
    <li v-for="value in object">
        {{ value }}
    </li>
</ul>
<script>
var app3 = new Vue({
    el : '#app3',
    data : {
        object : {
            FirstName : 'john',
            lastName : 'bob',
            Age : 30
        }
    }
})
</script>

运行结果:


举例-2 : 可以有第二个参数作为key

<ul id="app3" class="demo">
    <li v-for="(value,key) in object">
       {{key}}: {{ value }}
    </li>
</ul>
<script>
var app3 = new Vue({
    el : '#app3',
    data : {
        object : {
            FirstName : 'john',
            lastName : 'bob',
            Age : 30
        }
    }
})
</script>

运行结果:


举例-3 : 可以提供第三个参数作为index

<ul id="app3" class="demo">
        <li v-for="(value,key,index) in object">
           当前索引{{index}},当前键: {{key}},当前键对应的值: {{ value }}
        </li>
    </ul>
    <script>
    var app3 = new Vue({
        el: '#app3',
        data: {
            object: {
                FirstName: 'john',
                lastName: 'bob',
                Age: 30
            }
        }
    })
    </script>

运行结果:


另外,值得注意的是,当v-for和v-if同时存在于同一个元素上的时候,v-for的优先级是高于v-if的,这就使得在进行v-for循环遍历每一项时,v-if都会操作一次,不过,这会让你在渲染某些特定的项目时很方便。

举例说明 : 当v-for和v-if同时使用

 <ul id="box">
        <li v-for="(item, index) in items " v-if="index<2">
            {{ item }} : {{ index }}
        </li>
    </ul>
    <script>
    new Vue({ 
    	el: '#box', 
    	data: { 
    		items: ['hello', 'world', 'a', 'b', 'v'] 
    	} 
    })
    </script>

运行结果:


转载:

作者:椰果粒

链接:https://www.jianshu.com/p/60d46b0a3ebc

來源:简书
Logo

前往低代码交流专区

更多推荐