Vue 实现在移动端实现侧边栏城市联动效果，让用户体验更便捷

前端

2024-01-05 23:13:03

利用 Vue.js 的响应式特性实现侧边栏城市联动

在 Vue.js 中，我们可以使用响应式特性来动态更新侧边栏中的城市列表。具体步骤如下：

在 Vue 实例中定义一个名为 cities 的响应式数组，其中包含所有需要显示的城市名称。
使用 Vue.js 的 v-for 指令来遍历 cities 数组，并为每个城市创建一个列表项。
在列表项中，使用 Vue.js 的 v-model 指令将城市名称与一个输入框绑定。
当用户在输入框中输入内容时，Vue.js 会自动更新 cities 数组，从而动态地过滤出与输入内容匹配的城市。
同时，我们可以使用 Vue.js 的 v-if 指令来显示或隐藏侧边栏，以便在需要时显示侧边栏，而在不需要时隐藏侧边栏。

使用 PinyinJS 库处理中文城市名称的拼音转换

在实际开发中，我们可能会遇到需要处理中文城市名称的场景。为了方便用户输入，我们可以使用 PinyinJS 库来将中文城市名称转换为拼音。具体步骤如下：

安装 PinyinJS 库：npm install pinyinjs
在 Vue 实例中，导入 PinyinJS 库：import Pinyin from 'pinyinjs'
使用 PinyinJS 库将中文城市名称转换为拼音：const pinyin = Pinyin.getCamelChars(cityName)
将转换后的拼音存储在 Vue 实例的 cities 数组中。

完整示例代码

以下是一个完整的示例代码，供您参考和学习：

<template>
  <div>
    <input type="text" v-model="keyword">
    <ul>
      <li v-for="city in filteredCities" @click="selectCity(city)">
        {{ city }}
      </li>
    </ul>
  </div>
</template>

<script>
import Pinyin from 'pinyinjs'

export default {
  data() {
    return {
      cities: ['北京', '上海', '广州', '深圳', '杭州'],
      keyword: '',
      filteredCities: []
    }
  },
  methods: {
    selectCity(city) {
      // 选择城市的操作
    },
    filterCities() {
      this.filteredCities = this.cities.filter(city => {
        const pinyin = Pinyin.getCamelChars(city)
        return city.includes(this.keyword) || pinyin.includes(this.keyword)
      })
    }
  },
  watch: {
    keyword: {
      handler: 'filterCities',
      immediate: true
    }
  }
}
</script>