使用vuejs获取两个数组id,如果某一个数组id成功匹配另一个数组内id,那么就勾选

这篇文章是使用vuejs获取数组,其中一个数组里面包含全部的数值,另一个数组只有一部分数值,要做的就是第二个数组去匹配第一个数组,匹配相同的情况下,给这个相同的数值打上钩,如下图


项目地址:https://github.com/fengliting/vue-array,后续代码解说就不会全部都打上


html是遍历全部的数组

<li v-for="item in arr1" >
<div class="checkbox">
<label>
<!--value存在于v-model里面的话,checkbox会自动勾选-->
<input class="chk_1" type="checkbox" @click="choseitem($event.target.value)" v-model="indexs" :value="item.id">
{{item.value}}
</label>
</div>
</li>

js代码
//全部
var list1 = [{value:'Mary',id:1},{value:'Away',id:2},{value:'Ali',id:3},...]
//只存在一部分的数组

var list2 = [{value:'Mary',id:1},{value:'Away',id:2},{value:'Neinei',id:8},...]

//获取第二个数组里面的对象

getarrayitem:function(){

this.indexs = this.list2.map(function(json){

return json.id

})

}

//选中的值判断是否在第二个数组中

choseitem:function(inputid){

//this.isArr是判断某一个值是否在数组中,可以用原生js实现,也可以使用jquery实现,这里就不贴这个代码了

if(this.isArr(inputid,this.indexs){

console.log("存在第二个数组内")

})

console.log("不存在第二个数组中")

}


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值