Vue基础-for循环

v-for循环分为三种：整数循环、数组循环和对象循环作用：控制HTML元素中的循环，实现语句列表的生成用法： v-for = “item in items”或 v-for = “item of items”，其中item指集合的子项，items指被遍历的元素，通常为数组用处：写在谁上边，谁遍历整数循环举例-1 ：<div class="box"&

想要成为编码机器人

5232人浏览 · 2018-03-27 11:34:11

想要成为编码机器人 · 2018-03-27 11:34:11 发布

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

來源：简书

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^