Vue中的input元素提供了全選的功能。通過綁定v-model指令可以雙向綁定數據，并且配合ref指令可以在Vue組件中通過JavaScript來操作input元素，實現全選等功能。

下面是一個實現Vue input全選的示例代碼：

<template>
<div>
<input type="checkbox" v-model="isCheckedAll" @change="selectAll">全選
<hr>
<div v-for="(item, idx) in itemList">
<input type="checkbox" :id="'checkbox'+idx" v-model="item.isChecked" @change="checkAll">
<label :for="'checkbox'+idx">{{ item.name }}</label>
</div>
</div>
</template>
<script>
export default {
data() {
return {
itemList: [
{ name: '選項1', isChecked: false },
{ name: '選項2', isChecked: false },
{ name: '選項3', isChecked: false }
]
}
},
computed: {
// 是否全選
isCheckedAll() {
return this.itemList.every(item =>item.isChecked)
}
},
methods: {
// 全選
selectAll(e) {
let isChecked = e.target.checked
this.itemList.forEach(item =>item.isChecked = isChecked)
},
// 單選
checkAll() {
// 如果所有選項都被選中，則全選按鈕也應該被選中
if (this.isCheckedAll) {
this.$refs.checkAllCheckbox.checked = true
} else {
this.$refs.checkAllCheckbox.checked = false
}
}
}
}
</script>

在代碼中，我們先通過v-model指令綁定了全選復選框和每個選項的復選框的數據，然后通過v-for指令循環渲染了每一個選項。在computed中，我們定義了一個isCheckedAll計算屬性，用于判斷是否全選。在methods中，我們定義了兩個方法：selectAll()和checkAll()，用于實現全選和單選功能，其中checkAll()方法中使用了this.$refs來獲取全選復選框的DOM實例，從而實現全選復選框的勾選和取消勾選。

以上就是Vue input全選的實現方法，希望對大家有所幫助。