checkbox: 按鈕樣式(vue.js+bs5)

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div id="vapp" >
  
  <h3>
  checkbox with button style(bootstrap 5+ vue.js)
  </h3>
  <!--display:inline;:強制不換行-->
  <div v-for="(row,index) in queryVal.months" style="display:inline;">
   <input type="checkbox" class="btn-check" autocomplete="off" v-bind:id="'btncheck-'+index" v-model="row.value">
   <label class="btn btn-outline-primary btn-sm" v-bind:for="'btncheck-'+index">{{row.cname}}</label>
  </div>
  <br/>
  <!--{{queryVal.months}}<br/>-->
  
  <!--origin-->
  <!--<input type="checkbox" class="btn-check" id="btncheck-1" autocomplete="off" >
  <label class="btn btn-outline-primary btn-sm" for="btncheck-1">1月</label>
  
  <input type="checkbox" class="btn-check" id="btncheck-2" autocomplete="off">
  <label class="btn btn-outline-primary btn-sm" for="btncheck-2">2月</label>
  
  <input type="checkbox" class="btn-check" id="btncheck-3" autocomplete="off">
  <label class="btn btn-outline-primary btn-sm" for="btncheck-3">3月</label>
  
  <input type="checkbox" class="btn-check" id="btncheck-4" autocomplete="off">
  <label class="btn btn-outline-primary btn-sm" for="btncheck-4">4月</label>
  
  <input type="checkbox" class="btn-check" id="btncheck-5" autocomplete="off">
  <label class="btn btn-outline-primary btn-sm" for="btncheck-5">5月</label>
  
  <input type="checkbox" class="btn-check"  id="btncheck-6" autocomplete="off">
  <label class="btn btn-outline-primary btn-sm" for="btncheck-6">6月</label>-->

</div>

CSS

/*
ref1:https://bootstrap5.hexschool.com/docs/5.0/forms/checks-radios/
ref2:https://codepen.io/paulantoniou/pen/qvyZQP
*/

JavaScript

var app = new Vue({
	el:'#vapp',
	data:{
    queryVal: {
    	months:[
      	{ value: false, ename: 'January',cname: '1月' },
        { value: false, ename: 'February',cname: '2月' },
        { value: true, ename: 'March',cname: '3月' },
        { value: false, ename: 'April',cname: '4月' },
        { value: true, ename: 'May',cname: '5月' },
        { value: false, ename: 'June',cname: '6月' },
        { value: false, ename: 'July',cname: '7月' },
        { value: false, ename: 'August',cname: '8月' },
        { value: false, ename: 'September',cname: '9月' },
        { value: false, ename: 'October',cname: '10月' },
        { value: false, ename: 'November',cname: '11月' },
        { value: true, ename: 'December',cname: '12月' }
      ]
    },  	
  }
});