復(fù)選框分單獨(dú)使用和組合使用。

復(fù)選框單獨(dú)使用時(shí)：

<div id="app"><input type="checkbox" v-model="checked" id="checked"><label for="checked">選擇狀態(tài)：{{checked}}</label>??</div> <!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <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>

組合使用時(shí)，也是v-model與value一起，多個(gè)勾選框都綁定到同一個(gè)數(shù)組類型的數(shù)據(jù)，value的值在數(shù)組中，就會選中這一項(xiàng)。

這一過程也是雙向的，在勾選時(shí)，value的值也會自動(dòng)push到這個(gè)數(shù)組中。

?

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。