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 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
Python中的字典遍历备忘
2015/01/17 Python
Python中的模块和包概念介绍
2015/04/13 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
柏林通行证:Berlin Pass
2018/04/11 全球购物
司机检讨书
2014/02/13 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
会议欢迎标语
2014/06/30 职场文书
工作经历证明书范文
2014/11/02 职场文书
支教个人总结
2015/03/04 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
mysql的数据压缩性能对比详情
2021/11/07 MySQL
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python