console
var newww = new Vue({
'el': '#page',
data() {
return {
godSon: '',
nameArr: [
{value: '志勉', key:'zhimian', checked: true},
{value: '道恩', key:'daoen', checked: true},
{value: '烁根', key:'shuogen', checked: false},
{value: '育林', key:'yulin', checked: false},
{value: '伟龙', key:'weilong', checked: true},
{value: '诗鑫', key:'shixin', checked: true},
{value: '李铮', key:'lizheng', checked: true},
{value: '铭辉', key:'minghui', checked: true},
{value: '毅鹏', key:'yipeng', checked: true},
{value: '绍落', key:'shaoluo', checked: true},
{value: '建瀚', key:'jianhan', checked: true},
{value: '伟进', key:'weijin', checked: true},
{value: '镇文', key:'zhenwen', checked: true},
],
newArr: [],
selectArr: [],
lastNum: null
}
},
methods:{
randomName(){
let filter = this.nameArr.filter(item =>{
return item.checked
})
this.newArr = filter;
let maxNum = filter.length;
let minNum = 0;
let a =parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
for(let i in filter){
if(this.lastNum && this.lastNum == a){
continue;
}
if(i == a){
this.godSon = filter[i].value;
console.log('天选之子:'+ this.godSon)
this.lastNum = a;
return false;
}
}
},
checkInput(json){
console.log(json.key);
let arr = this.nameArr;
arr.map(arrItem => {
if(arrItem.key == json.key){
arrItem.checked = !json.checked
}
});
this.nameArr = arr
},
},
})
<div id="page">
<div v-for="item in nameArr">
<label :for="item.key" >
<input type="checkbox" :id="item.key" :name="item.value" :checked="item.checked" @click="checkInput(item)">
{{item.value}}
</label>
</div>
{{selectArr}}
<div>
<button @click="randomName">点击</button>
天选之子:{{godSon}}
</div>
</div>