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

<template>
  <div class="demo1">
    <h3>姓名：{{ names }}</h3>
    <h3>年龄：{{ age }}</h3>
    <h3>性别：{{ sex }}</h3>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeSex">修改性别</button>
    
  </div>
</template>
<script setup lang="ts" name="Demo3">
  /**
   * ref 可以定义基本数据类型
   * 真实修改的值 ref.value
   */
  import { ref } from 'vue';

    let names = ref("孙悟空");
    let age = ref(18);
    let sex = ref("男");

    function changeName() {
      console.log(names)
        names.value = "猪八戒";
    }
    function changeAge() {
      age.value = 20;
    }
    function changeSex() {
      sex.value = "man"
    }


</script>

<style></style>