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 中令人困惑的变量赋值
Aug 13 Javascript
javascript数组的扩展实现代码集合
Jun 01 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 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.MVC的模板标签系统(三)
2006/09/05 PHP
深入php内核之php in array
2015/11/10 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
浅谈Webpack打包优化技巧
2018/06/12 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
python实现dijkstra最短路由算法
2019/01/17 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
Ajax的工作原理
2015/12/04 面试题
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
2014年新教师工作总结
2014/11/08 职场文书
2014年英语工作总结
2014/12/20 职场文书
小学新教师个人总结
2015/02/05 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL