vue恢复初始数据this.$data,this.$options.data()解析

目录
  • vue恢复初始数据this.$data,this.$options.data()
    • vue恢复初始数据
  • this.$options.data()和this.$data你知多少
    • 场所描述
    • 主角登场

vue恢复初始数据this.$data,this.$options.data()

vue恢复初始数据

在vue开放中我们会遇到一个页面或者一个弹窗让他恢复到原始数据的情况，如果数据不多我们可以重设赋值一下，但数据较多的情况下会比较麻烦，这时候可以用到

this.$data，this.$options

  • this.$options.data()这个是vue原始的数据，就是你页面刚加载时的data
  • this.$data这个是现在阶段的vue数据，就是你改变data的数据

下面是一个弹窗的数据，在弹窗关闭时恢复数据，这里使用Object.assign将原始数据和现在的数据融合，会将改变的数据重置到初始状态

watch: {
    ShowModal(val) {
      if (!val) {
        Object.assign(this.$data, this.$options.data())
      }
    }
  }

如果只想让一个数据恢复到以前

this.base = this.$options.data().base

this.$options.data()和this.$data你知多少

场所描述

  • 如何获取vue-data中的所有值？
  • 如何获取vue-data中的某一个值？
  • 如何获取vue-data中的初始值？
  • 如何设置data中的值位初始值？

主角登场

this.options.data() 和 this.data

<template>
    <div>
        <button @click="gotos">改变</button>
        <button @click="obtain">获取改变后的值</button>
        <button @click="inithander">获取初始状态下的值</button>
        <button @click="reset">重置</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            // https://www.jianshu.com/p/05697682a46f
            obj:{
                name:'张三',
                age:'李四',
                sex:'男'
            },
            subjective:{
                info:'ok'
            }
        }
    },
    methods:{
        gotos(){
            this.obj.sex='我改变了性别'
        },
        //获取vue中data中的所有值 当然data中的值也有可能是被改变了的
        obtain(){
            console.log('vue中data中的所有值',this.$data);
        },
        // 获取组件下初始状态下的值；就是你在data中最初写的值
        inithander(){
            console.log('初始状态下的值',this.$options.data());
        },
        // 重置值
        reset(){
            Object.assign(this.$data.obj,{name:'',age:'', sex:''});
            // 还可以使用   Object.assign(this.$data.obj,this.$options.data().obj); //前提是obj的值是空
            console.log('重置', this.obj )
        }
    }
}
</script>

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

赞 (0)

相关推荐

  • Vue中的this.$options.data()和this.$data用法说明

    问题 项目里遇到一个问题,用this.$options.data()重置组件data时,data()里用this获取的props或method都为undefined,代码简化如下: export default { props: { P: Object }, data () { return { A: { a: this.methodA }, B: this.P }; }, methods: { resetData () { // 更新时调用 Object.assign(this.$data,

  • vue data恢复初始化数据的实现方法

    在我们进行vue开发过程中,经常会保存一些页面,此时,我们在app.vue的配置如下, <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> 以此来保存页面,那么在再次进入这些页面的时候,我们需要重置该页面的原始数据,那么该如何进行呢?是不是要讲每个数据进行重写,答案是否定的.利用Object.assign 以及vue的数据可

  • Vue 重置data的数据为初始状态操作

    在某些情况下,需要重新使用data中的数据,但是data中的数据已经被各种表单.变量等赋值,那么怎么重置data的值呢? 1. 逐个赋值 ... data() { return { name: '', sex: '', desc: '' } } ... // 逐个赋值 this.name = '' this.sex = '' this.desc = '' 这个方法比较笨,当然也可以实现效果,但是一个一个去重新赋值比较麻烦而且代码看起来也会比较乱. 下面这个方法肯定是你喜欢的,一行代码搞定- 2.

  • vue恢复初始数据this.$data,this.$options.data()解析

    vue恢复初始数据this.$data,this.$options.data()解析

    目录 vue恢复初始数据this.$data,this.$options.data() vue恢复初始数据 this.$options.data()和this.$data你知多少 场所描述 主角登场 vue恢复初始数据this.$data,this.$options.data() vue恢复初始数据 在vue开放中我们会遇到一个页面或者一个弹窗让他恢复到原始数据的情况,如果数据不多我们可以重设赋值一下,但数据较多的情况下会比较麻烦,这时候可以用到 this.$data,this.$options

  • 基于Vue中this.$options.data()的this指向问题

    目录 this.$options.data()的this指向问题 vue文档中有关于data的指向问题的解释 vue骚操作之this.$options.data() 重置vue组件的data数据 小结一下 this.$options.data()的this指向问题 项目里遇到一个问题,用this.$options.data()重置组件data时报错,原因是因为form里的rule规则采用了this写法. 如下: rules: {         code: [this.$rules.requir

  • 使用Vue实现调用接口加载页面初始数据

    闲着没事写了一个电影推荐的网页,很简单,使用的是Vue的实现. let vm = new Vue({ el:'#content', data:{ name:'', pic:'', actor:'', detail:'', link:'' }, mounted:function () { this.getMovie(); }, methods:{ getMovie:function () { var _this = this; let url = '/niuren/getRecommendFilm

  • 详解Vue.js基于$.ajax获取数据并与组件的data绑定

    详解Vue.js基于$.ajax获取数据并与组件的data绑定

    Vue.js与jQuery不冲突??? 在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax请求来完成的. 说到ajax请求,第一反应肯定想到了jQuery,项目中如果引入jQuery会帮助我们简化很多操作,简化DOM操作,ajax方法获取后端数据等. 然而,Vue.js和jQuery冲突吗??? 答案显然是不冲突!!! 接下来会实现Vue.js组件中使用jQuery的ajax方法获取服务器端数据并绑定至组件的data中. 创建Vue.js单文件组件 <

  • Vue监听数据对象变化源码

    监听数据对象变化,最容易想到的是建立一个需要监视对象的表,定时扫描其值,有变化,则执行相应操作,不过这种实现方式,性能是个问题,如果需要监视的数据量大的话,每扫描一次全部的对象,需要的时间很长.当然,有些框架是采用的这种方式,不过他们用非常巧妙的算法提升性能,这不在我们的讨论范围之类. Vue 中数据对象的监视,是通过设置 ES5 的新特性(ES7 都快出来了,ES5 的东西倒也真称不得新)Object.defineProperty() 中的 set.get 来实现的. 目标 与官方文档第一个例

  • 全面解析vue中的数据双向绑定

    1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的getter,和setter.这也正是Vue不兼容IE8以下的原因. 2.Object.defineProerty(); var obj = {}; Object.defineProperty(obj,"hello",{ enumerable: true, //表示这个属性能够通过 for -- in 循环 (是否可枚举); configurable

  • vue 请求后台数据的实例代码

    需要引用vue-resource 安装请参考https://github.com/pagekit/vue-resource官方文档 在入口函数中加入 import VueResource from 'vue-resource' Vue.use(VueResource); 在package.json文件中加入 "dependencies": { "vue": "^2.2.6", "vue-resource":"^1.2

  • laravel + vue实现的数据统计绘图（今天、7天、30天数据）

    laravel + vue实现的数据统计绘图（今天、7天、30天数据）

    前言 本文主要是按照时段统计今天.7天.30天的数据,利用laravel+vue实现的,下面话不多说了,来一起看看详细的介绍吧 效果图: 1. 前端vue 使用vue-highcharts <highcharts :options="options"></highcharts> data() { return { options: { title: { text: '' }, xAxis: { categories: [] }, yAxis: { title:

随机推荐