vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue在页面和方法中通过遍历对象获取对象的键和值

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>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文