Vue.js 如何实现城市联动选择功能-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，城市联动选择是一种常见的需求。Vue.js 是一种流行的前端框架，它提供了一种简单而强大的方式来实现城市联动选择功能。在本文中，我们将介绍如何使用 Vue.js 实现城市联动选择功能，并提供一个示例代码。

1. 数据源

实现城市联动选择功能的第一步是准备数据源。在本例中，我们将使用一个简单的 JavaScript 对象来表示城市数据。

const cities = {
  '广东省': ['广州市', '深圳市', '东莞市', '佛山市', '珠海市'],
  '北京市': ['东城区', '西城区', '朝阳区', '海淀区', '丰台区'],
  '上海市': ['黄浦区', '徐汇区', '长宁区', '静安区', '闵行区']
};

在这个对象中，每个省份都是一个键，其对应的值是一个数组，包含该省份下的城市名称。当用户选择一个省份时，我们将显示该省份下的城市列表。

2. 创建 Vue 组件

使用 Vue.js 实现城市联动选择功能的下一步是创建 Vue 组件。在本例中，我们将创建一个包含两个下拉列表的组件：一个用于选择省份，另一个用于选择城市。

// javascriptcn.com 代码示例
<template>
  <div>
    <select v-model="selectedProvince">
      <option v-for="(province, index) in provinces" :key="index">{{ province }}</option>
    </select>
    <select v-model="selectedCity">
      <option v-for="(city, index) in cities" :key="index">{{ city }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: Object.keys(cities),
      selectedProvince: '',
      cities: [],
      selectedCity: ''
    };
  },
  watch: {
    selectedProvince() {
      this.cities = cities[this.selectedProvince];
      this.selectedCity = '';
    }
  }
};
</script>

在这个组件中，我们使用了 Vue.js 的模板语法来渲染两个下拉列表。第一个下拉列表用于选择省份，第二个下拉列表用于选择城市。我们还定义了四个数据属性：provinces，selectedProvince，cities 和 selectedCity。provinces 是一个数组，包含所有省份的名称；selectedProvince 是用户选择的省份名称；cities 是一个数组，包含所选省份下的城市名称；selectedCity 是用户选择的城市名称。

我们还定义了一个 watch 属性，用于监听 selectedProvince 的变化。当用户选择一个省份时，我们将更新 cities 数组并将 selectedCity 重置为空字符串。这将确保当用户选择不同的省份时，城市列表会相应地更新。

3. 使用组件

现在我们已经创建了一个 Vue 组件，下一步是在应用程序中使用它。在本例中，我们将创建一个简单的应用程序，该程序包含一个使用我们刚刚创建的组件的页面。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>城市联动选择</title>
  </head>
  <body>
    <div id="app">
      <city-selector></city-selector>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="app.js"></script>
  </body>
</html>

在这个页面中，我们创建了一个 Vue 实例，并将其挂载到页面上的 #app 元素上。我们还在这个页面中引入了 Vue.js 库和我们刚刚创建的组件的 JavaScript 文件。

4. 示例代码

下面是完整的示例代码，包括数据源、Vue 组件和应用程序的 HTML 文件。

// javascriptcn.com 代码示例
const cities = {
  '广东省': ['广州市', '深圳市', '东莞市', '佛山市', '珠海市'],
  '北京市': ['东城区', '西城区', '朝阳区', '海淀区', '丰台区'],
  '上海市': ['黄浦区', '徐汇区', '长宁区', '静安区', '闵行区']
};

Vue.component('city-selector', {
  template: `
    <div>
      <select v-model="selectedProvince">
        <option v-for="(province, index) in provinces" :key="index">{{ province }}</option>
      </select>
      <select v-model="selectedCity">
        <option v-for="(city, index) in cities" :key="index">{{ city }}</option>
      </select>
    </div>
  `,
  data() {
    return {
      provinces: Object.keys(cities),
      selectedProvince: '',
      cities: [],
      selectedCity: ''
    };
  },
  watch: {
    selectedProvince() {
      this.cities = cities[this.selectedProvince];
      this.selectedCity = '';
    }
  }
});

new Vue({
  el: '#app'
});

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>城市联动选择</title>
  </head>
  <body>
    <div id="app">
      <city-selector></city-selector>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="app.js"></script>
  </body>
</html>

5. 总结

在本文中，我们介绍了如何使用 Vue.js 实现城市联动选择功能。我们首先准备了一个简单的 JavaScript 对象作为数据源，然后创建了一个 Vue 组件来实现城市联动选择功能。最后，我们将组件用于一个简单的应用程序中。这个应用程序可以让用户选择省份和城市，并根据用户的选择相应地更新城市列表。我们希望这个示例代码可以帮助您在自己的项目中实现城市联动选择功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6512373995b1f8cacdaa1a17