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


Posted in Javascript onSeptember 26, 2018

数据list,结构为[{id:1,…},{id:2,…}],数据shoplist,结构为[{id:1,…},{id:2,…}],判断当shoplist.id等于list.id时显示list的数据。

.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;
 }

效果:

刚开始时:

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

两边id不同时:

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

通过点击使得两边id相同时:

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

以上这篇Vue监听一个数组id是否与另一个数组id相同的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
jQuery返回定位插件详解
May 15 jQuery
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 #Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 #Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 #Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 #Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 #Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 #Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 #Javascript
You might like
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
php防止sql注入简单分析
2015/03/18 PHP
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
js new Date()实例测试
2019/10/31 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
python杀死一个线程的方法
2015/09/06 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
Java分治归并排序算法实例详解
2017/12/12 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
深入理解Python异常处理的哲学
2019/02/01 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
西安交大自主招生自荐信
2014/01/27 职场文书
会计员岗位职责
2014/03/15 职场文书
文案策划求职信
2014/03/18 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
飞屋环游记观后感
2015/06/08 职场文书
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript