Vue单选框默认选中并筛选列表

问题描述：

我想在Vue中实现一个单选框，默认选中某个选项，并根据选中的选项来筛选列表。请问如何实现这个功能？

回答：

在Vue中，你可以使用v-model指令和computed属性来实现单选框的默认选中和根据选中的选项来筛选列表的功能。

你需要在Vue的data中定义一个变量来保存单选框选中的值。比如，你可以将该变量命名为selectedOption，并将其初始值设置为你想要默认选中的选项的值。

`javascript

data() {

return {

selectedOption: 'option1' // 默认选中的选项的值

}

然后，在模板中使用v-model指令将该变量与单选框绑定起来。每个单选框的value属性应设置为对应的选项的值。
`html

  
  选项1


  
  选项2

现在，当你打开页面时，选项1会被默认选中。如果你想要选中其他选项，只需将selectedOption的初始值设置为对应选项的值。

接下来，你可以使用computed属性来根据选中的选项来筛选列表。在computed属性中，你可以根据selectedOption的值来返回筛选后的列表。

`javascript

computed: {

filteredList() {

// 根据selectedOption的值筛选列表

return this.list.filter(item => item.option === this.selectedOption);

}

在上面的代码中，假设你的列表数据保存在data的list属性中，并且每个列表项都有一个option属性来表示选项的值。根据selectedOption的值，使用filter方法来筛选出符合条件的列表项。
在模板中使用filteredlist来展示筛选后的列表。
`html

  
{{ item.name }}

在上述代码中，假设列表项有一个name属性来表示名称，使用v-for指令遍历filteredList数组，并使用:key属性来指定每个列表项的唯一标识。

通过以上步骤，你就可以实现在Vue中实现单选框默认选中并根据选中的选项筛选列表的功能了。记得根据你的实际需求来修改代码中的变量名和属性名。

上一篇

vue怎么打包放到后端部署

下一篇

vue双击事件绑定