VIP32/vue3/my_project/归档/1.setup+ref+reactive/Demo.vue

<template>
  <div class="demo1">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>性别：{{ sex }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeSex">修改性别</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            name:"孙悟空",
            age:18,
            sex:"男"
        }
    },
    methods:{
        changeName() {
            this.name = '猪八戒'
        },
        changeAge() {
            this.age = 20
        },
        changeSex() {
            this.sex = '女'
        },
    }
}
</script>

<style scoped>
    .demo1 {
        background: #00f;
        padding: 20px;
    }
    button {
        margin-left: 20px;
    }
</style>