console
var newww = new Vue({
'el': '#page',
data() {
return {
godSon: '',
nameArr: [
{value: '慧敏', key:'huimin', checked: true},
{value: '诗颖', key:'shiying', checked: true},
{value: '映彤', key:'yingtong', checked: true},
{value: '陈雅', key:'chenya', checked: true},
{value: '家伦', key:'jialun', checked: true},
{value: '祥发', key:'xianfa', checked: true},
{value: '彦博', key:'yanbo', checked: true},
{value: '金梁', key:'jingliang', checked: true},
{value: '康杰', key:'kangjie', checked: true},
{value: '郭涵 ', key:'guohan', 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>