Vue 遍历对象

简介: Vue 遍历对象

不光可以遍历数组也可以遍历对象

可以使用v-for 遍历对象,在M层定义普通对象,

举例:data 内容

data:{
    obj:{
        id:1,
        name:'名称',
        des:'des内容',
        content:'具体内容'
    }
}

这个时候,用 v-for 遍历可以遍历对象。

<div v-for="(val,key,i) in obj" :key = "i">

遍历对象是以键 - 值对形式, 第一个参数 表示值,第二个表示键,第三个是索引。


这样的里面 对应的 val 表示值 key表示键 i表示索引。


val 为 1 ‘名称’ ‘des内容’ ‘具体内容’


key 为 id name des content


i 的值为 0 1 2 3


相关文章
|
5月前
|
JSON JavaScript 前端开发
有关vue判断是否是空对象的问题
有关vue判断是否是空对象的问题
441 0
|
5月前
|
存储 JavaScript
第24节: Vue3 绑定到数组
第24节: Vue3 绑定到数组
70 0
|
2月前
|
JavaScript 前端开发
vue获取元素属性
vue获取元素属性
42 3
|
2月前
|
JavaScript
【Vue面试题八】、为什么data属性是一个函数而不是一个对象?
这篇文章解释了为什么在Vue中组件的`data`属性必须是一个函数而不是一个对象。原因在于组件可能会有多个实例,如果`data`是一个对象,那么这些实例将会共享同一个`data`对象,导致数据污染。而当`data`是一个函数时,每次创建组件实例都会返回一个新的`data`对象,从而确保了数据的隔离。文章通过示例和源码分析,展示了Vue初始化`data`的过程和组件选项合并的原理,最终得出结论:根实例的`data`可以是对象或函数,而组件实例的`data`必须为函数。
【Vue面试题八】、为什么data属性是一个函数而不是一个对象?
|
4月前
|
JavaScript
|
5月前
|
JavaScript
Vue中如何获取dom元素?vue方法
Vue中如何获取dom元素?vue方法
|
5月前
|
JavaScript 前端开发
vue绑定数组
vue绑定数组
|
5月前
|
JavaScript
Vue中如何对DOM元素进行访问和操作?
Vue中如何对DOM元素进行访问和操作?
150 2
|
JavaScript
Vue 遍历对象
Vue 遍历对象
107 0
|
JavaScript
Vue 单文件组件的常用方法
Vue 单文件组件的常用方法