<template>
    <section>
        <h2>Demo vue V——>M</h2>
        <div class="demo-vue">
            <input type="text" v-model="msg" />
            <p>Hello, {{msg}}</p>
        </div>
        <h2>Demo Native</h2>
        <div class="demo-native">
            <input type="text" id="input-name" />
            <p id="txt-name">-</p>
        </div>
    </section>
</template>

<script>
export default {
    name: "HelloWorld",
    data() {
        return {
            age: "1",
            tall: "1",
            visible: false,
            msg: "Jackyang"
        };
    },
    mounted() {
        let Dz = {};
        let $inputname = document.querySelector("#input-name");
        let $txtname = document.querySelector("#txt-name");
        let myname = "";
        Object.defineProperty(Dz, "name", {
            set(newVal) {
                myname = newVal;
                $txtname.innerHTML = `Hello, ${newVal}`;
                $inputname.value = newVal;
                return newVal;
            },
            get() {
                return `Hello, ${myname}`;
            }
        });
        Dz.name = "jack";
        $inputname.addEventListener("input", () => {
            Dz.name = $inputname.value;
        });
    },
    comments: {},
    methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>