返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue恢复初始数据this.$data,this.$options.data()解析
  • 473
分享到

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

2024-04-02 19:04:59 473人浏览 独家记忆
摘要

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

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

vue恢复初始数据

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

this.$datathis.$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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue恢复初始数据this.$data,this.$options.data()解析

本文链接: https://lsjlt.com/news/141162.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作