vue3 所有国家地区选择

您可以使用第三方的vue-i18n-iso-countries库来实现Vue.js 3的所有国家和地区选择。这个库提供了一个简单易用的API，可以通过国家/地区名称或ISO 3166-1代码来获取相应的国家/地区信息。以下是一个示例：

1. 安装vue-i18n-iso-countries库：

   npm install vue-i18n-iso-countries

2. 在Vue.js 3应用程序中引入该库：

   import Vue from 'vue'
   import VueI18n from 'vue-i18n'
   import VueI18nIsoCountries from 'vue-i18n-iso-countries'

   Vue.use(VueI18n)
   Vue.use(VueI18nIsoCountries)

   const i18n = new VueI18n({
     locale: 'en'
   })

3. 在Vue.js 3组件中使用该库：

   <template>
     <div>
       <select v-model="selectedCountry">
         <option v-for="(country, code) in countries" :key="code" :value="code">
           {{ country }}
         </option>
       </select>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         selectedCountry: '',
         countries: {}
       }
     },
     mounted() {
       this.countries = this.$isoCountries.getNames('en')
     }
   }
   </script>

在上面的示例中，我们使用Vue.js 3的v-model指令来绑定选定的国家/地区，使用v-for指令来循环显示所有国家/地区的下拉选项，并使用$isoCountries对象的getNames方法来获取所有国家/地区的名称和ISO 3166-1代码。您可以将'en'替换为您需要的语言代码以获取相应的国家/地区名称。