vue数组单选列表默认选中一个
时间: 2023-08-31 09:03:51 浏览: 111
vue 实现单选框设置默认选中值
可以通过给数组中的对象添加一个selected属性来实现Vue数组单选列表的默认选中一个。具体步骤如下:
1. 在Vue的data中定义一个数组,例如items,用来存放列表的数据,数组中的每个对象代表一个选项,并添加一个selected属性。
```
data() {
return {
items: [
{ name: '选项1', selected: false },
{ name: '选项2', selected: true },
{ name: '选项3', selected: false }
]
}
}
```
2. 在模板中使用v-for指令遍历数组,并使用v-bind绑定selected属性到选项的状态。
```
<ul>
<li v-for="item in items" v-bind:class="{ selected: item.selected }">{{ item.name }}</li>
</ul>
```
3. 在Vue的methods中定义一个方法,用来设置选中状态。
```
methods: {
selectItem(item) {
this.items.forEach(i => {
i.selected = false;
});
item.selected = true;
}
}
```
4. 在模板中使用v-on指令将选项的点击事件绑定到selectItem方法上,实现点击选项时切换选中状态。
```
<ul>
<li v-for="item in items" v-bind:class="{ selected: item.selected }" v-on:click="selectItem(item)">{{ item.name }}</li>
</ul>
```
通过以上步骤,就可以实现Vue数组单选列表默认选中一个的效果。
阅读全文