在web應用中，勾選checkbox已經成為了很常見的UI交互之一。在Vue框架中，設置checkbox的選中狀態是非常簡單易懂的。

首先，我們需要先創建Vue實例，并在data中定義一個數據字段用于保存checkbox的狀態，例如：

var app = new Vue({
el: '#app',
data: {
checked: false
}
})

接下來，我們在HTML中使用v-model指令將數據字段與checkbox綁定起來：

<div id="app">
<input type="checkbox" id="myCheckbox" v-model="checked">
<label for="myCheckbox">Checkbox</label>
</div>

現在，checkbox的選中狀態會自動與數據字段同步，當我們勾選或取消勾選時，數據字段的值將自動更新。

如果我們想在頁面加載時自動選中checkbox，只需要將數據字段的初始值設置為true：

var app = new Vue({
el: '#app',
data: {
checked: true
}
})

還可以通過計算屬性或watcher來動態改變checkbox的選中狀態。例如，我們可以定義一個計算屬性來監聽其他數據字段，并根據條件返回true或false：

var app = new Vue({
el: '#app',
data: {
value1: 'foo',
value2: 'bar'
},
computed: {
checked: function () {
return this.value1 === 'foo' && this.value2 === 'bar'
}
}
})

在上面的例子中，如果value1和value2的值分別為'foo'和'bar'，則checkbox將被選中，反之則不選中。

最后，還可以通過ref指令來操作checkbox元素。例如：

<div id="app">
<input type="checkbox" ref="myCheckbox">
<label @click="toggle">Checkbox</label>
</div>
<script>
var app = new Vue({
el: '#app',
methods: {
toggle: function () {
this.$refs.myCheckbox.checked = !this.$refs.myCheckbox.checked
}
}
})
</script>

在上面的例子中，當我們點擊label元素時，通過toggle方法切換checkbox的選中狀態。