VIP32/vue3/晚课/my_project/src/components/Demo3.vue

<template>
  <div class="demo2">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>性别：{{ sex }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeSex">修改性别</button>
  </div>
</template>
<script lang="ts" setup name="newDemo">
/**
 * ref  可以定义基本数据类型 会令数据编程RefImpl
 * 
 */
import {ref} from 'vue'
let name = ref("小艾");
let age = ref(19);
let sex = ref("男");
  console.log(name,'222')
function changeName() {
  name.value = "小艾2"
  // console.log(name)
}
function changeAge() {
  age.value = 20;
  console.log(age)
}
function changeSex() {
  sex.value = "man";
  console.log(sex)
}
</script>
<script></script>
<style></style>