vue3学习第一天part1

<template>

  <img alt="Vue logo" src="./assets/logo.png">

  <HelloWorld msg="JSpang.com"/>

  <h2>欢迎光临红浪漫洗浴中心</h2>

  <div>请选择一位美女为你服务</div>

  <div>

    <button

      v-for="(item,index) in girls"

      v-bind:key="index"

      @click="selectGirlFun(index)"

      >

      {{index}}:{{item}}

    </button>

  </div>

  <div>你选择了{{selectGirl}}美女为你服务</div>

</template>

<script lang="ts">

import { defineComponent,ref } from 'vue';

import HelloWorld from './components/HelloWorld.vue';

export default defineComponent({

  name: 'App',

  components: {

    HelloWorld

  },

  setup(){

    const girls=ref(['大脚','刘英','晓红'])

    const selectGirl = ref("")

    const selectGirlFun= (index: number) =>{

      selectGirl.value = girls.value[index]

    }

    return{

      girls,

      selectGirl,

      selectGirlFun

    }

  }

});

</script>

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>