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>

在這里插入圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM