在许多 Web 应用中,用户需要从一个国家列表中进行选择。本代码片段提供了一个使用 Vue.js 实现的动态国家列表选择器,允许用户轻松浏览和选择国家。
该代码片段实现了以下基本功能:
1. 创建国家列表
首先,使用 ref
钩子创建了一个名为 countries
的响应式国家列表:
const countries = ref([
'Afghanistan',
'Albania',
'Algeria',
// ...
])
2. 渲染列表
在模板中,使用 v-for
遍历 countries
数组并渲染每个国家:
<ul>
<li v-for="country in countries" :key="country">
{{ country }}
<i class="iconfont icon-arrow-right"></i>
</li>
</ul>
3. 监听点击事件
在每个列表项上添加一个 click
事件侦听器,以便在用户单击时触发:
<li @click="selectCountry(country)">
{{ country }}
<i class="iconfont icon-arrow-right"></i>
</li>
4. 定义 selectCountry
方法
在 <script>
部分,定义一个 selectCountry
方法来处理点击事件:
const selectCountry = (country) => {
// 在此处执行选择国家后的操作
}
开发这段代码的过程巩固了我对 Vue.js 响应式数据、列表渲染和事件处理的理解。
未来拓展与优化