Vue JS中循环渲染复选框并绑定值，根据URL参数回显选中状态

我来帮你搞定这个Vue的多复选框过滤器需求！下面一步步拆解实现逻辑，代码都是可直接复用的~

1. 先获取URL中的GET参数 #

首先得从跳转后的列表页URL里拿到location、type、price这三个参数。如果你的项目用了Vue Router，直接通过this.$route.query就能轻松获取：

// 在组件的created钩子（Vue2）或者setup函数（Vue3）里处理
created() {
  // 解构参数，给默认值避免undefined报错
  const { location = '', type = '', price = '' } = this.$route.query;
  // 把参数转成数组——因为复选框支持多选，URL里的参数一般用逗号分隔（比如location=beijing,shanghai）
  this.selectedLocations = location.split(',');
  // 后续type、price也可以用同样逻辑处理，先聚焦location的实现
}

要是没用到Vue Router，用原生JS解析URL也没问题：

const urlParams = new URLSearchParams(window.location.search);
const locationParam = urlParams.get('location') || '';
this.selectedLocations = locationParam.split(',');

2. 准备复选框的数据源 #

你需要一个存储所有可选选项的数组，比如地区选项：

data() {
  return {
    selectedLocations: [], // 存储选中的地点，和URL参数对应
    locationOptions: [
      { label: '北京', value: 'beijing' },
      { label: '上海', value: 'shanghai' },
      { label: '广州', value: 'guangzhou' },
      { label: '深圳', value: 'shenzhen' }
    ]
  }
}

3. 用v-for渲染复选框并绑定选中状态 #

接下来在模板里循环渲染复选框，核心是用v-model绑定存储选中值的数组——Vue会自动匹配数组里的值和复选框的value，实现默认选中：

<template>
  <div class="filter-group">
    <h3>地区筛选</h3>
    <div v-for="option in locationOptions" :key="option.value" class="filter-item">
      <input
        type="checkbox"
        :id="option.value"
        :value="option.value"
        v-model="selectedLocations"
      />
      <label :for="option.value">{{ option.label }}</label>
    </div>
  </div>
</template>

这里的关键是v-model绑定的是数组类型，只要selectedLocations里包含某个复选框的value，这个复选框就会自动处于选中状态，完美匹配你从URL参数里拿到的值。

4. 扩展：处理type和price参数 #

同样的逻辑可以直接复用在type和price筛选上：

• 给每个筛选类别定义对应的选中数组（比如selectedTypes、selectedPrices）
• 准备对应的选项数组（typeOptions、priceOptions）
• 用相同的v-for+v-model写法渲染复选框即可

小提示 #

• 如果URL参数是单个值（比如location=beijing），split(',')后会得到['beijing']，完全不影响v-model的绑定逻辑。
• 如果需要在用户修改复选框后同步更新URL参数，可以监听选中数组的变化，用this.$router.push（Vue Router）或者原生JS修改URL，保持参数和选中状态一致。

内容的提问来源于stack exchange，提问作者Rakesh Kohali