vue在页面和方法中如何通过遍历对象获取对象的键(key)和值(value)
作者：念你那丝微笑
这篇文章主要介绍了vue在页面和方法中如何通过遍历对象获取对象的键(key)和值(value)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue在页面和方法中通过遍历对象获取对象的键和值
最近通过对象相关知识的深入学习，我发现对象的遍历主要分为两种情况，一种是在页面中遍历，另外一种是在方法中遍历对象，现在我们就从这两种情况分别来遍历对象获取对象的key和value。
情况一：在页面中遍历对象获取对象的键和值
定义一个变量
obj:object={a:1,b:2,c:3};//用于在页面中调用
在页面中使用v-for遍历出对象的key和value
获取对象的key和value
<p v-for="(value,key) in obj" :key='key'>key:{{key}}-----value:{{value}}</p>
情况二：在方法中遍历对象获取对象的键和值
定义个对象变量
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 ,在第三个位置还有 一个 索引
<div id="app">
<!-- 注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 -->
<p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
user: {
id: 1,
name: 'tony',
gender: '男'
methods: {}
</script>
</body>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
vue项目接入高德地图点击地图获取经纬度以及省市区功能2023-08-08
基于Vue + ElementUI实现可编辑表格及校验2023-08-08
vue中的v-slot指令使用2023-08-08
详解vue中父子组件传递参数props的实现方式2023-07-07
vue和react项目中key的作用示例详解2023-07-07
VUE2响应式原理使用Object.defineProperty缺点2023-07-07
解决Vue3使用Element-Plus导航刷新后active高亮消失的问题2023-07-07
Vue使用echarts绘制柱状图和折线图2023-07-07
美国设下计谋,用娘炮文化重塑日本,已影响至中国2021-11-19
时空伴随者是什么意思?时空伴随者介绍2021-11-09
工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终2021-11-05
2022年放假安排出炉：五一连休5天 2022年所有节日一览表2021-10-26
电脑版 - 返回首页
2006-2023 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号
