vue在页面和方法中如何通过遍历对象获取对象的键(key)和值(value)
作者:念你那丝微笑
这篇文章主要介绍了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>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。