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 相关文章推荐
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
从0开始学Vue
Oct 27 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
react基本安装与测试示例
Apr 27 Javascript
WebPack工具运行原理及入门教程
Dec 02 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
set_include_path在win和linux下的区别
2008/01/10 PHP
坏狼的PHP学习教程之第1天
2008/06/15 PHP
Yii配置文件用法详解
2014/12/04 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
微信小程序自定义弹出层效果
2020/05/26 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
详解Python 中的容器 collections
2020/08/17 Python
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
大学学年自我鉴定
2013/10/28 职场文书
教师党员一句话承诺
2014/03/28 职场文书
计划生育宣传标语
2014/06/21 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书