效果圖:
<!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">是否超重