VIP32/vue3/晚课/my_project/src/components/Demo2.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>
<!--
  setup语法糖:不支持使用this 弱化this
  npm install vite-plugin-vue-setup-extend
  在vite.config.ts文件中挂载插件
-->
<script lang="ts" setup name="newDemo">
let name = "小艾";
let age = 19;
let sex = "男";
function changeName() {
  name = "小艾2";
  console.log(name)
}
function changeAge() {
  age = 20;
  console.log(age)
}
function changeSex() {
  sex = "man";
  console.log(sex)
}
</script>
<script></script>
<style></style>