vue v-for指令

v-for是vue 的循环指令,作用是遍历数组(对象)的每一个值

基本使用

如:

<li v-for="item in arr">
    {{item}}
</li>

var vue = new Vue({
            el: "#app",
            data: {
                arr: [
                    '苹果',
                    '橘子',
                    '香蕉',
                    '草莓'
                ]
            }
})

v-for还有index和key属性 

<li v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</li>

item指的是被遍历的数组(对象)的每一个值,item的命名不是规定的,可以自定义命名
index指的是每一项被遍历的值的下标索引值
key是用来给每一项值加元素标识,作用是为了区分元素,为了实现最小量的更新

v-for还可以用来遍历对象

var vue = new Vue({
    el: "#app",
    data: {
        obj:{
            name: '小明',
            age: '17岁',
            height: '175cm',
            sex: '男',
            hobby: '打篮球'
        }
    }
})

<li v-for="(item,index) in obj" :key="index">{{index}}:{{item}}</li>

和数组内容不同的是index此时代表的是对象的key
正确的表示方法 

 

上一篇:【MySQL】对表的相关操作(DDL)-前言


下一篇:dji esdk开发(1)Edge SDK 简介、配置demo运行