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
正确的表示方法 

 

相关推荐

  1. vue v-for指令

    2024-03-25 11:00:06       36 阅读
  2. vue-指令v-for

    2024-03-25 11:00:06       137 阅读
  3. Vue的v-for指令、事件处理、表单控制

    2024-03-25 11:00:06       49 阅读
  4. vue触发原生form提交到指定action地址

    2024-03-25 11:00:06       31 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-25 11:00:06       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-25 11:00:06       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-25 11:00:06       82 阅读
  4. Python语言-面向对象

    2024-03-25 11:00:06       91 阅读

热门阅读

  1. linux系统Kubernetes工具ingress暴露服务

    2024-03-25 11:00:06       35 阅读
  2. video/pdf文件预览与进度上传

    2024-03-25 11:00:06       40 阅读
  3. 代码审计与web安全-第四章作业

    2024-03-25 11:00:06       40 阅读
  4. vue3.0-monaco组件封装

    2024-03-25 11:00:06       36 阅读
  5. 1. 一起学习机器学习 -- Data_exploration

    2024-03-25 11:00:06       35 阅读
  6. QT GUI常用函数介绍

    2024-03-25 11:00:06       41 阅读
  7. React-创建虚拟Dom四种方法

    2024-03-25 11:00:06       36 阅读
  8. 网络安全实训Day12

    2024-03-25 11:00:06       37 阅读
  9. 图像去噪与增强技术

    2024-03-25 11:00:06       39 阅读
  10. 【详细讲解如何快速上手Vue.js框架】

    2024-03-25 11:00:06       39 阅读