###
Vue 实现列表
单选、
多选和全
选功能
#### 列表
单选功能实现
对于列表中的
单选操作，在
Vue应用中可以通过绑定`v-model`指令来追踪当前被
选中的项。下面是一个简单的例子，展示了如何创建一个可以
单选的列表：
```html
<div id="app">
<ul>
<li v-for="
(item, index
) in items" :key="index"
@click="selectItem
(index
)"
:class="{ 'selected': selectedIndex === index }">{{ item }}</li>
</ul>
Selected Item: {{ selected }}
</div>
```
```javascript
new
Vue({
el: '#app',
data
() {
return {
items: ['Option A', 'Option B', 'Option C'],
selectedIndex: null,
};
},
computed: {
selected
() {
if
(this.selectedIndex !== null && this.items[this.selectedIndex]
) {
return this.items[this.selectedIndex];
}
return '';
}
},
methods: {
selectItem
(index
) {
this.selectedIndex = index;
}
}
}
);
```
此代码片段实现了当用户
点击某个列表项时会更新`selectedIndex`变量从而
改变样式并显示所
选项[^1]。
#### 列表
多选功能实现
为了支持
多选模式，则需要维护一个数组用于存储已
选中的索引或对象ID，并通过事件处理函数管理这个集合的状态变化。这里给出一个
多选的例子：
```html
<div id="multi-app">
<ul>
<li v-for="
(item, idx
) in multiItems" :key="idx"
@click="toggleSelection
(idx
)"
:class="{ active: isSelected
(idx
) }">{{ item.name }}</li>
</ul>
Selected Items: {{ selectedMultiItems.join
(', '
) || "None"}}
</div>
```
```javascript
new
Vue({
el: '#multi-app',
data
() {
return {
multiItems: [
{ name: 'Apple' },
{ name: 'Banana' },
{ name: 'Orange'}
],
selectedIndexes: []
};
},
methods: {
toggleSelection
(idx
) {
const i = this.selectedIndexes.indexOf
(idx
);
if
(i > -1
){
this.selectedIndexes.splice
(i, 1
); // Remove from selection.
}else{
this.selectedIndexes.push
(idx
); // Add to selection.
}
},
isSelected
(idx
) {
return this.selectedIndexes.includes
(idx
);
}
},
computed: {
selectedMultiItems
(){
return this.multiItems.filter
((_, idx
) => this.isSelected
(idx
)).map
(item=>item.name
);
}
}
}
);
```
这段脚本允许用户
点击不同的条目来进行
多项
选择，并且能够动态反映用户的交互行为。
#### 全
选与反
选功能实现
要增加全
选/取消全
选以及反向
选择的功能，可以在界面上加入额外
按钮控制整个列表的
选择状态。以下是增强版的
多选组件加上了这些特性后的样子：
```html
<div id="all-select-app">
<!-- 添加两个
按钮 -->
<
button @click="selectAll
()">Select All</
button>
<
button @click="invertSelection
()">Invert Selection</
button>
<ul>
<li v-for="
(item, idx
) in allSelectItems" :key="idx"
@click="toggleAllSelection
(idx
)"
:class="{ active: isAllSelected
(idx
) }">{{ item.label }}</li>
</ul>
Selected Count: {{ selectedCount }} / Total: {{ allSelectItems.length }}
</div>
```
```javascript
new
Vue({
el: '#all-select-app',
data
() {
return {
allSelectItems: [{ label: 'Red'}, {label:'Green'}, {label:'Blue'}],
allSelectedIndexes: [],
};
},
methods: {
toggleAllSelection
(idx
) {
let i = this.allSelectedIndexes.indexOf
(idx
);
if
(i >= 0
) {
this.allSelectedIndexes.splice
(i, 1
);
} else {
this.allSelectedIndexes.push
(idx
);
}
},
selectAll
() {
this.allSelectedIndexes = Array.from
({ length: this.allSelectItems.length },
(_, i
) => i
);
},
invertSelection
() {
this.allSelectedIndexes = this.allSelectItems.map
((_, idx
) =>
!this.isAllSelected
(idx
) ? idx : undefined
).filter
(Boolean
);
},
isAllSelected
(idx
) {
return this.allSelectedIndexes.includes
(idx
);
}
},
computed: {
selectedCount
() {
return this.allSelectedIndexes.length;
}
}
}
);
```
上述代码不仅提供了基本的
多选能力，还增加了方便的操作方式让用户更轻松地完成批量
选择的任务[^2]。
本文介绍如何在Vue中使用三元表达式实现按钮的多选和单选功能，点击按钮时能根据选中状态改变按钮的样式。
最低0.47元/天 解锁文章
扫一扫
3306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
