復選框分單獨使用和組合使用。

復選框單獨使用時：

<div id="app"><input type="checkbox" v-model="checked" id="checked"><label for="checked">選擇狀態：{{checked}}</label>??</div> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>? <script>new Vue({el:'#app',data:{checked:false}}) </script>

組合使用時，也是v-model與value一起，多個勾選框都綁定到同一個數組類型的數據，value的值在數組中，就會選中這一項。

這一過程也是雙向的，在勾選時，value的值也會自動push到這個數組中。

?

<div id="app"><input type="checkbox" v-model="checked"? value="學習"id="study"><label for="study">學習</label>?<br>?<input type="checkbox" v-model="checked"? value="讀書"id="read"><label for="read">讀書</label>?<br>?<input type="checkbox" v-model="checked"? value="運動"id="play"><label for="play">運動</label>?<br>?<p>選擇的項是：{{checked}}</p></div> <!-- 開發環境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>? <script>new Vue({el:'#app',data:{checked:['學習','讀書']}}) </script>

總結

以上是生活随笔為你收集整理的Vue的表单组件之复选框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。