vue實現復選框checkbox


效果圖:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

</head>
<body>
<div id="app" v-cloak>
<div>
<span>復選框:</span>=={{checkboxIdStr}}
<br>
<label v-for="(item,index) in tempData">
<input type="checkbox" :value="item.id" v-model="checkboxIdStr">{{item.name}}

<!--方式二 選中1 不選中0-->

<input  v-model="isQRCodeTrack" :true-value="1":false-value="0"  id="isQRCodeTrack"  type="checkbox">


</label>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
var vue=new Vue({
  el:"#app",
  data:{

    isQRCodeTrack:null,

    tempData:[{'id':'1','name':'張三'},{'id':'2','name':'李四'},{'id':'3','name':'王五'}],//復選框數據源

    checkboxIdStrs:'1,3',//假設這是你從數據庫里取出的數據

    checkboxIdStr:[],//注意這個一定要是數組的形式,這樣v-model綁定ckeckbox才會自動選中

  },

 created: function () {
  if (this.checkboxIdStrs.length>0) {

    const arr=this.checkboxIdStrs.split(',');
      for (let i in arr) {
     
  this.checkboxIdStr.push(arr[i]);
  }
  }

}

})
</script>
</body>
</html>

2021-1-22 更新 另一種情況:

  

  選中是1,未選中是0

1 <input v-model="isOverWeight" type="checkbox" class="checkbox_pol margin_left12"
2                                    :true-value="ENUM.yesOrNo.yes.key"
3                                    :false-value="ENUM.yesOrNo.no.key">是否超重

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM