在vue按钮中显示所选城市

<template>
  <div>
    <!-- 使用v-model进行双向数据绑定 -->
    <select v-model="selectedCity">
      <option disabled value="">请选择一个城市</option>
      <option v-for="city in cities" :key="city" :value="city">{{ city }}</option>
    </select>

    <!-- 显示所选城市 -->
    <button>{{ selectedCity || '未选择城市' }}</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 定义城市列表和所选城市的响应式数据
    const cities = ref(['北京', '上海', '广州', '深圳']);
    const selectedCity = ref('');

    return { cities, selectedCity };
  }
};
</script>