Vue监听一个数组编号是否与另一个数组编号相同的方法

数据列表，结构为[{id:1，…}，{id:2，…}]，数据购物清单，结构为[{id:1，…}，{id:2，…}]，判断当shoplist.id等于list.id时显示目录的数据。某视频剪辑软件文件：

模板div class=' hello ' div class='商店列表'按钮@点击='点击按钮商店列表'单击我/按钮span商店列表-id :/span put type=' text ' v-model='商店列表[商店数量].id/div class=' list '按钮@ click=' click button list ' click me/button span list-id :/span put type=' text ' v-model=' list[list count]' .id/div输入类=' data ' v-model=' data ' H2 { { list } }/H2 H2 H2 { { shopillist } }/H2/div/template。射流研究…文件：

导出默认{ data(){ return { msg : }欢迎使用您的Vue.js App '，shopCount:0，listCount:0，data: ' '，list:[{id:1，名称3: ' hello ' }，{ id 3:2，名称33: ' hello ' }，{ id 33:3，名称33: ' hello ' }，{ id 33:4，}，方法3: { click商店数量；这个。商店数量=这个。商店计数%这个。商店名单。长度；这个。getdata()；},单击按钮列表：函数(){ this。列表计数；这个。listcount=this。列表计数% this。名单。长度；这个。getdata()；}，getdata :函数(){ this。数据=' '；如果(这个。购物清单[这个。商店数量].id====这个。列出[这个。列表数].id){//这个。数据=这个。列表；这个。数据=这个。名单。map((元素)={ return元素。id元素。姓名；}).join('，')} else { this.data=} }，mount ed : function(){ this。getdata()；}}.较少的文件：列表{ margin-top : 20px；} .数据{宽度： 500像素高度：200 pxborder: 1px固体# 66666;边距-top : 20px；}效果：

刚开始时：

两边编号不同时：

通过点击使得两边编号相同时：

以上这篇某视频剪辑软件监听一个数组编号是否与另一个数组编号相同的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。