微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Vue中this.$options.data()和this.$data知多少?

1.场所描述

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

2.主角登场 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>

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐