在Web開發中，多選框(element UI創建多選框)是一個常見的需要。在vue中實現多選框功能也很簡單。本文將會介紹如何在vue中使用element UI來創建多選框。

<el-checkbox-group v-model="checkedCities">
<el-checkbox label="北京"></el-checkbox>
<el-checkbox label="上海"></el-checkbox>
<el-checkbox label="廣州"></el-checkbox>
<el-checkbox label="深圳"></el-checkbox>
</el-checkbox-group>

首先，我們需要將選中的城市存儲到一個數組中，所以我們需要在Vue實例中聲明一個data屬性checkedCities。

data() {
return {
checkedCities: [], // 存儲選中的城市
}
}

接下來，添加el-checkbox-group組件和多個el-checkbox組件。el-checkbox-group組件的v-model屬性綁定checkedCities屬性，這表示當用戶選擇或取消選擇一個el-checkbox時，checkedCities屬性的值也會相應地更新。el-checkbox的label屬性是一個字符串，表示這個選項的唯一標識符。

如果我們希望el-checkbox的初始狀態是選中的，可以在該組件中添加checked屬性，如下所示：

<el-checkbox label="北京" checked></el-checkbox>

如果我們想要進一步處理選中和取消選中的事件，可以使用vue中的watch屬性來監聽checkedCities數組的變化。可以將它用于提交表單或修改其他UI元素，例如在下面的watch示例中，用戶選擇了三個城市，打印出選擇的城市

watch: {
checkedCities(newVal, oldVal) {
console.log(`你選擇的城市有：${newVal}`);
}
}

通過這個簡單的例子，我們可以很容易地創建多選框功能，不需要在Vue中編寫復雜的代碼，使用element UI庫提供的多選框組件即可。

最后，如果你想要改變多選框和選中狀態的樣式，可以借助element UI提供的一些CSS類。例如，你可以通過修改.el-checkbox__label:before這個偽元素的樣式來改變多選框的外觀。

.el-checkbox__label:before {
border: 1px solid #ccc;
width: 14px;
height: 14px;
top: -1px;
left: -1px;
}