Vue監(jiān)聽(tīng)一個(gè)數(shù)組id是否與另一個(gè)數(shù)組id相同的方法
更新時(shí)間：2018年09月26日 10:08:41 作者：DevilLittle
今天小編就為大家分享一篇Vue監(jiān)聽(tīng)一個(gè)數(shù)組id是否與另一個(gè)數(shù)組id相同的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
數(shù)據(jù)list，結(jié)構(gòu)為[{id:1,…},{id:2,…}]，數(shù)據(jù)shoplist，結(jié)構(gòu)為[{id:1,…},{id:2,…}]，判斷當(dāng)shoplist.id等于list.id時(shí)顯示list的數(shù)據(jù)。
.vue文件：
<template>
<div class="hello">
<div class="shoplist">
<button @click="clickButtonShopList">click me</button>
<span>shoplist-id:</span><input type="text" v-model="shoplist[shopCount].id">
</div>
<div class="list">
<button @click="clickButtonList">click me</button>
<span>list-id:</span><input type="text" v-model="list[listCount].id">
</div>
<input class="data" v-model="data">
<h2>{{list}}</h2>
<h2>{{shoplist}}</h2>
</div>
</template>
.js文件：
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App',
shopCount:0,
listCount:0,
data:'',
list:[{id:1,name:'hello'},{id:2,name:'hello'},{id:3,name:'hello'},{id:4,name:'hello'},{id:5,name:'hello'}],
shoplist:[{id:1,name:'hello'},{id:2,name:'hello'},{id:3,name:'hello'},{id:4,name:'hello'},{id:5,name:'hello'}]
};
},
methods:{
clickButtonShopList:function () {
this.shopCount++;
this.shopCount=this.shopCount%this.shoplist.length;
this.getData();
},
clickButtonList:function () {
this.listCount++;
this.listCount=this.listCount%this.list.length;
this.getData();
},
getData:function () {
this.data='';
if(this.shoplist[this.shopCount].id===this.list[this.listCount].id){
// this.data=this.list;
this.data=this.list.map((element)=>{
return element.id+element.name;
}).join(',')
}else {
this.data='';
}
}
},
mounted: function(){
this.getData();
}
}
.less文件：
.list{
margin-top: 20px;
}
.data{
width: 500px;
height:200px;
border: 1px solid #666666;
margin-top: 20px;
}
效果：
剛開(kāi)始時(shí)：
兩邊id不同時(shí)：
通過(guò)點(diǎn)擊使得兩邊id相同時(shí)：
以上這篇Vue監(jiān)聽(tīng)一個(gè)數(shù)組id是否與另一個(gè)數(shù)組id相同的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3如何使用postcss-px-to-viewport適配屏幕
這篇文章主要介紹了vue3如何使用postcss-px-to-viewport適配屏幕問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker的示例
這篇文章主要介紹了Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker,文中給大家介紹了vue-baidu-api地圖標(biāo)記點(diǎn)（自定義標(biāo)記圖標(biāo)），設(shè)置標(biāo)記點(diǎn)的優(yōu)先級(jí)問(wèn)題，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-08-08
這篇文章主要為大家介紹了Vue編譯器解析compile源碼解析示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue動(dòng)態(tài)代理無(wú)須重啟項(xiàng)目解決方案詳解
這篇文章主要為大家介紹了vue動(dòng)態(tài)代理無(wú)須重啟項(xiàng)目解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了vue $router和$route的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
VUE前端實(shí)現(xiàn)token的無(wú)感刷新3種方案(refresh_token)
這篇文章主要給大家介紹了關(guān)于VUE前端實(shí)現(xiàn)token的無(wú)感刷新3種方案(refresh_token)的相關(guān)資料,為了提供更好的用戶(hù)體驗(yàn),我們可以通過(guò)實(shí)現(xiàn)Token的無(wú)感刷新機(jī)制來(lái)避免用戶(hù)在使用過(guò)程中的中斷,需要的朋友可以參考下2023-11-11
elementUI 動(dòng)態(tài)生成幾行幾列的方法示例
這篇文章主要介紹了elementUI 動(dòng)態(tài)生成幾行幾列的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
在vue中實(shí)現(xiàn)antd的動(dòng)態(tài)主題的代碼示例
在需求開(kāi)發(fā)階段,鑒于項(xiàng)目采用了antd作為基礎(chǔ)組件庫(kù),確保組件外觀(guān)與antd一致變得尤為重要,這包括顏色、字體大小及尺寸等樣式的統(tǒng)一,然而,截至當(dāng)前antd-vue尚未實(shí)現(xiàn)這一便捷的CSS變量特性,但理解其背后的實(shí)現(xiàn)機(jī)制后,我們可以自行構(gòu)建這一功能,需要的朋友可以參考下2024-07-07
這篇文章主要為大家介紹了vue實(shí)現(xiàn)列表展示的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了VUE3+TS獲取組件類(lèi)型的方法踩坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03