vue赋值对象属性方法有哪些

lxf2023-04-05 20:16:01

赋值对象属性的方法有: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){...}”。

vue赋值对象属性方法有哪些

实例教程作业环境:windows7系统软件、vue3版,DELL G3计算机。

近期根据目标基本知识的加强学习,我发现了对象赋值关键分两种状况,一种要在页面上赋值,另外一种是在方式中赋值目标,如今我们先从两种情况各自来赋值目标获得对象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>

实现效果
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赋值对象属性方法有哪些

【相关信息:vuejs视频教学、web前端开发】

以上就是关于vue赋值对象属性方法有哪些的具体内容,大量欢迎关注AdminJS其他类似文章!