第一种方式 : defineComponent ref
<script lang="ts">
import { defineComponent,ref } from 'vue';
export default defineComponent({
name: 'App',
setup() {
const girls=ref(['大脚','小脚','高的'])
const selGirls=ref('')
const selgirlsFunction=(i: number)=>{
selGirls.value=girls.value[i]
}
return{
girls,
selGirls,
selgirlsFunction
}
},
})
<script>
<template>
<button
v-for="(item ,i) in girls" :key="i"
@click="selgirlsFunction(i)"
>{{i+1}}:{{item}}</button>
<div>
选择【{{selGirls}}】为你服务
</div>
</template>
第二种:reactive() toRefs() (建议使用这一种)
import { reactive,toRefs } from 'vue';
<script lang="ts">
interface DataProps{
girls:string[],
selGirls:string,
selgirlsFunction:(i:number)=> void
}
export default {
name: 'App',
setup() {
const data:DataProps=reactive({
girls:['大脚','小脚','高的'],
selGirls:'',
selgirlsFunction:(i: number)=>{
data.selGirls=data.girls[i]
}
})
const refData=toRefs(data)
return{
...refData
}
},
}
<script>
<template>
<div>欢迎光临!</div>
<div>请问需要什么服务?</div>
<button
v-for="(item ,i) in girls" :key="i"
@click="selgirlsFunction(i)"
>{{i+1}}:{{item}}</button>
<div>
选择【{{selGirls}}】为你服务
</div>
</template>