Vue练习三十二：04_05_设置读取属性

Demo 在线地址：
https://sx00xs.github.io/test/32/index.html
---------------------------------------------------------------
ide: vscode
文件格式：.vue
解析：（待补）

<template>
    <div :style="styleObject">
        <input type="button" value="Get Style" @click="GetStyle"> 
        <input type="button" value="Set style" @click="SetStyle">
        <input type="button" value="Default Style" @click="DefaultStyle">
    </div>
</template>
<script>
export default {
    data(){
        return{
            styleObject:{
                width: '400px',
                height: '200px',
                background: '#fef4eb',
                border: '1px solid #f60',
                margin: '0 auto'
            }
        }
    },
    methods:{
        GetStyle(){
            alert(
                "width: "+ this.styleObject.width + '\n' +
                "height: " + this.styleObject.height + '\n' +
                "background-color: " + this.styleObject.background + '\n' 
            )
        },
        SetStyle(){
            this.styleObject.width='330px';
            this.styleObject.height='100px';
            this.styleObject.borderColor="#0084ff";
            this.styleObject.backgroundColor="#eff8ff";
        },
        DefaultStyle(){
            this.styleObject.width='400px';
            this.styleObject.height='200px';
            this.styleObject.borderColor='#f60';
            this.styleObject.backgroundColor='#fef4eb';
        }
    }
}
</script>