vue如何遍历对象属性-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

vue如何遍历对象属性

这篇文章主要介绍“vue如何遍历对象属性”,在日常操作中,相信很多人在vue如何遍历对象属性问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue如何遍历对象属性”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

成都创新互联专业为企业提供云城网站建设、云城做网站、云城网站设计、云城网站制作等企业网站建设、网页设计与制作、云城企业网站模板建站服务,十年云城做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

遍历对象属性的方法有:1、使用v-for指令遍历出对象的key和value,语法“v-for="(val,key,i) in obj"”;2、用Object.keys()遍历对象的键和值,语法“Object.keys(ob).forEach(key=>{...}”;3、通过“for…in”循环遍历对象的键和值,语法“for(let key in obj){...}”。

最近通过对象相关知识的深入学习,我发现对象的遍历主要分为两种情况,一种是在页面中遍历,另外一种是在方法中遍历对象,现在我们就从这两种情况分别来遍历对象获取对象的key和value。

情况一:在页面中遍历对象获取对象的键和值

定义一个变量

  obj:object={a:1,b:2,c:3};//用于在页面中调用

在页面中使用v-for遍历出对象的key和value

    
      

        获取对象的key和value      

      key:{{key}}-----value:{{value}}

    

实现效果
vue如何遍历对象属性

情况二:在方法中遍历对象获取对象的键和值

定义个对象变量

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]);
  }

方法一实现效果:

vue如何遍历对象属性

方法二:通过for in循环遍历对象的键和值

    for(let key in this.objNum){
    //for循环let key是对象里面的键,再通过,[]的形式this.objNum[item]去获取对象的value值
      console.log('key',key);
      console.log('value',this.objNum[key ]);
    }

方法二实现效果:

vue如何遍历对象属性

到此,关于“vue如何遍历对象属性”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


文章题目:vue如何遍历对象属性
转载源于:http://kswsj.cn/article/gpihcj.html

其他资讯