vue如何遍历data所有变量并赋值

目录
  • 遍历data所有变量并赋值
  • 遍历data工具类

遍历data所有变量并赋值

遍历data工具类

var _data_str = sessionStorage.getItem("SCM301");
    //将json字符串转成对象
    var store_data = JSON.parse(_data_str);
    if (_data_str) {
     //this._data为vue的data组件中的data
      getObjectData(this._data, store_data);
    }
//调用的方法
export function getObjectData(target, current, cb) {
  if (!(target instanceof Object) || !(current instanceof Object)) return;
  Object.keys(target).forEach(function (name) {
    let value = current[name];
    if (typeof value !== "undefined" && target.hasOwnProperty(name)) {
      // 如果有callback，先执行callback
      if (typeof cb === "function") {
        target[name] = cb(name, value);
        return;
      }
      // 如果是对象，进行深层次拷贝
      if (Object.prototype.toString.call(target[name]) === "[object Object]") {
        getObjectData(target[name], current[name], cb);
        return;
      }
      target[name] = value;
    }
  });
};

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue中用props给data赋初始值遇到的问题解决

    前言 前段时间做一个运营活动的项目,上线后产品反馈页面埋点不对,在排查过程中发现,问题竟然是由于Vue中的data初始值导致,而data的初始值来自于props.为方便描述,现将问题抽象如下: 一.现象 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用props初始化data中变量</title>

  • vue中v-for循环给标签属性赋值的方法

    1.给每个按钮添加class的属性值以及icon图标属性值,通过v-for实现自动添加样式,发现属性值无法显示,切记在属性前加上v-bind <html> <head> <meta charset="utf-8"> <title>v-for在线测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"> &

  • Vue循环遍历选项赋值到对应控件的实现方法

    老规矩:先走流程,上动图看效果!在此推荐个大佬,为我提供解决思路,大家多多访问他的博客,希望带给大家帮助 https://blog.csdn.net/yyp0304Devin 下面就一步步为大家讲解如何实现将它的试题选项赋值到对应的控件中的,因为题型较多,拿单选题型为大家演示:不同题型它的界面也是不同的,这里也有个技术点,这里就先不讲解了. 如动图所示,要完成这样的功能,肯定是要访问后端接口的 知道URL后,我们就知道携带的试题ID过去 一.传递ID 在点击编辑按钮事件中将ID传值过去 <el-

  • Vue执行方法,方法获取data值,设置data值,方法传值操作

    方法写在methods中 v-on:click="run()" @click="run()" 方法获取data中的数据通过this.数据获取 方法设置data中的数据通过this.数据=''设置 例如通过this.list=[1,2,3],设置list的值,让页面出循环list 可通过 @click="run('123')",将值传到方法中 可通过 @click="run($event)",将事件对象传到方法中,然后根据事件对

  • vue如何遍历data所有变量并赋值

    vue如何遍历data所有变量并赋值

    目录 遍历data所有变量并赋值 遍历data工具类 遍历data所有变量并赋值 遍历data工具类 var _data_str = sessionStorage.getItem("SCM301"); //将json字符串转成对象 var store_data = JSON.parse(_data_str); if (_data_str) { //this._data为vue的data组件中的data getObjectData(this._data, store_data); } /

  • vue data变量相互赋值后被实时同步的解决步骤

    数据结构是这样子的 data() { return { title: 'web前端 this data变量相互赋值后被实时同步问题', val_1: 'vue', val_2: '' } } 问题源: 我们在onload()把val_1 赋给 val_2 (或者在用户click时更改也都会出现这个问题) onload() { this.val_2 = this.val_1; } 解决方法: 我们在通过JavaScript把 "val_1" 转换成字符串类型,再JSON.parse,最后

  • vue中data数据之间如何赋值问题

    目录 vue data数据之间如何赋值 实现方式 vue Data数据赋值变量语法 vue data数据之间如何赋值 最近我妹突然问我vue的data之间需要进行赋值,这是什么奇葩需求,干嘛不直接自己定义好就好了啊,既然有这种场景,那么我们就需要去解决这种场景. 实现方式 <template>   <div>      <Input v-model="dictValue" placeholder="请输入字典的值" clearable

  • vue 数据遍历筛选 过滤 排序的应用操作

    vue 数据遍历筛选 过滤 排序的应用操作

    vue 中对v-for 遍历数据的处理方式 可以分为两类 : 一.对data 直接赋值(比较笨,但是比较直接) <div id="app"> <ul> <li v-for="item in list">{{item.n}}</li> </ul> </div> </body> <script> var app=new Vue({ el:'#app', data:{ list

  • vue如何重置data的所有属性

    目录 重置data的所有属性 1.拿到data原始属性 2.拿到当前的data 3.复制到当前$data里面 重置当前页面的data 问题一 问题二 重置data的所有属性 1.拿到data原始属性 this.$options.data() 2.拿到当前的data this.$data 3.复制到当前$data里面 Object.assign(this.$data, this.$options.data()); 重置当前页面的data 问题一 在某些情况下,需要重新使用data中的数据,但是da

  • vue如何修改data中的obj数据的属性

    目录 修改data中的obj数据的属性 修改data以实现数据响应式 怎么保证你的变化我Vue能监听到? 如果初始值没给这个变量Vue还能监听吗? 修改data中的obj数据的属性 //方法一 var obj = this.obj; obj.name = 'long'; this.obj = obj; //方法二 Vue.set(this.obj, "password", "num"); //part1,要修改的obj对象; //part2,要添加或者修改的属性;

  • Vue.js 动态为img的src赋值方法

    需求是这样: ajax获取数据如下 { "code": "200", "data": { "SumAmount": 200, "List": [{ "amount": 100, "sex": "male", "fee": 1, "id": 98, "status": 2, "ti

  • vue里的data要用return返回的原因浅析

    官网的示例 var vm = new Vue({ el: '#example', data: { message: 'Hello' } }); 项目中的写法 data() { return { message: 'Hello' } } 为什么要把data变成函数并return属性呢? 组件是一个可复用的实例,当你引用一个组件的时候,组件里的data是一个普通的对象,所有用到这个组件的都引用的同一个data,就会造成数据污染. 将data封装成函数后,在实例化组件的时候,我们只是调用了data函数

  • Vue中遍历数组的新方法实例详解

    1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ if(item.name.indexOf(keyword) != -1){ newList.push(item) } }) return newList } 2.filter item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组 search(key

随机推荐