vue在页面和方法中如何通过遍历对象获取对象的键(key)和值(value)
更新时间：2023年05月25日 09:56:57 作者：念你那丝微笑
这篇文章主要介绍了vue在页面和方法中如何通过遍历对象获取对象的键(key)和值(value)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue在页面和方法中通过遍历对象获取对象的键和值
最近通过对象相关知识的深入学习，我发现对象的遍历主要分为两种情况，一种是在页面中遍历，另外一种是在方法中遍历对象，现在我们就从这两种情况分别来遍历对象获取对象的key和value。
情况一：在页面中遍历对象获取对象的键和值
定义一个变量
obj:object={a:1,b:2,c:3};//用于在页面中调用在页面中使用v-for遍历出对象的key和value
<div>
<h1>
获取对象的key和value
</h1>
<p v-for="(value,key) in obj" :key='key'>key:{{key}}-----value:{{value}}</p>
</div>实现效果
情况二：在方法中遍历对象获取对象的键和值
定义个对象变量
objNum:object={1:'a',2:'b',3:'c'};方法一：使用Object.keys()方法遍历对象的键和值
//实现思路：通过 Object.keys()对象方法将对象的key转化为一个数组，再通过forEach遍历出数组的值，再通过[key]去获取对象的value值。
Object.keys(this.objNum).forEach(key=>{
console.log('key:',key,'value:',this.objNum[key]);
}方法一实现效果：
方法二：通过for循环遍历对象的键和值
for(let key in this.objNum){
//for循环let key是对象里面的键，再通过,[]的形式this.objNum[item]去获取对象的value值
console.log('key',key);
console.log('value',this.objNum[key ]);
}方法二实现效果：
vue使用v-for遍历对象的键和值
使用v-for遍历对象的键和值时要注意，v-for="(val, key, i) in obj，其中val是值，在键的前面， 除了 有 val key ,在第三个位置还有 一个 索引
<body>
<div id="app">
<!-- 注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 -->
<p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
user: {
id: 1,
name: 'tony',
gender: '男'
}
},
methods: {}
});
</script>
</body>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于vue基于Echars的拖拽数据可视化功能实现的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
ant design vue datepicker日期选择器中文化操作
这篇文章主要介绍了ant design vue datepicker日期选择器中文化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
Vue3 elementUI如何修改el-date-picker默认时间
这篇文章主要介绍了Vue3 elementUI如何修改el-date-picker默认时间，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本文主要介绍了vue实现input输入模糊查询的三种方式吗，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
使用 Vue.js 久了，还是不明白响应式原理和双向数据绑定的区别？今天，我们就一起来学习一下，将解释它们的区别，快跟随小编一起学习学习吧2022-08-08
在 Vue3 中,可以使用 Vue Router 实现跳转到 404 页面,即当用户访问一个不存在路由时,系统会默认跳转到 404 页面,本文给大家介绍了一个简单的实现方法,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue 自定义内置组件 select的相关知识，整合了第三方jquery 插件select2,具体实例代码大家参考下本文2018-04-04
在Vue.js开发中,引用外部JavaScript文件是常见的需求,以便利用第三方库或自定义功能,这篇文章主要介绍了在Vue3开发中引用js文件几种常见场景的方法,需要的朋友可以参考下2025-08-08
本篇文章主要介绍了vue2.x select2 指令封装详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
keep-alive是Vue.js的一个内置组件。这篇文章主要介绍了vue.js内置组件之keep-alive组件使用,需要的朋友可以参考下2018-07-07
最新评论