Vue和LayUI都是前端開發中非常常用的工具，它們可以幫助我們輕松地構建漂亮的網頁，并提供各種功能和組件。其中，Checkbox是LayUI中非常重要的組件之一，可以幫助用戶在多個選項中進行選擇。

在Vue中，使用LayUI Checkbox非常簡單，只需要引入LayUI庫和Vue組件，然后在Vue實例中設置Checkbox的值即可。例如：

<div id="app">
<span v-for="item in items">
<input type="checkbox" name="check" title="{{item.name}}" v-model="item.checked">
</span>
</div>
<script>
layui.use('form', function(){
var form = layui.form;
new Vue({
el: '#app',
data: {
items: [
{ name: "選項1", checked: true },
{ name: "選項2", checked: false },
{ name: "選項3", checked: false }
]
},
mounted: function(){
form.render(); 
},
watch: {
items: {
handler: function(){
form.render('checkbox');
},
deep: true
}
}
})
});
</script>

在上面的代碼中，我們通過v-for指令循環遍歷items數組，并將每個數組元素渲染為一個Checkbox組件。這里使用了LayUI提供的title屬性來顯示選項名稱，v-model指令則用于綁定選項的選中狀態。

在Vue實例中，我們使用form.render()方法來渲染頁面中的所有LayUI組件，包括Checkbox組件。在數據發生改變時，通過watch來監聽items數組，并重新渲染Checkbox組件。

總之，通過Vue和LayUI Checkbox的組合，我們能夠快速、方便地創建出一個漂亮、實用的多選框組件，為用戶提供更好的體驗。