setup+reactive+toRefs实现红浪漫选美女

<template>
<div>
  <img alt="Vue logo" src="../assets/logo.png" />
  <div>
    <h2>欢迎光临红浪漫洗浴中心</h2>
    <div>请选择一位美女为你服务</div>
  </div>
  <div>
    <button v-for="(item, index) in girls" :key="index" @click="selectGirlFun(index)">
      {{ index }} : {{ item }}
    </button>
    <div>你选择了【{{ selectGirl }}】为你服务</div>
  </div>
</div>
</template>

<script lang="ts">
import {
  reactive,
  toRefs
} from "vue";
interface DaraProps {
  girls: string[];
  selectGirl: string;
  selectGirlFun: (index: number) => void;
}

export default {
  name: "Home",
  setup() {
    const data = reactive({
      girls: ["大脚", "刘英", "晓红"],
      selectGirl: "",
      selectGirlFun: (index: number) => {
        data.selectGirl = data.girls[index];
      },
    });

    return {
      ...toRefs(data),
    };
  },
};
</script>