Vue如何循环提取对象数组中的值
1.数据如下,提取name和callcount
2代码.
getQueryCallStatistics("sesp1", this.provinceId).then((res) => { let arr = []; let arr1 = []; let arr2 = []; let arr3 = []; let arr4 = []; this.xunshiMap = res.data.callstatistics; res.data.callstatistics.forEach((element) => { // arr.push([ // element.name, // element.callcount.patrol, // element.callcount.repair, // element.callcount.defect // ]); arr.push([element.name, 27, 38, 27]); arr1.push(element.name); arr2.push({ value: element.callcount.defect, name: element.name,type: element.name }); arr3.push({ value: element.callcount.patrol, name: element.name,type: element.name }); arr4.push({ value: element.callcount.repair, name: element.name,type: element.name }); // arr2.push({ value: 27, name: element.name }); // arr3.push({ value: 27, name: element.name }); // arr4.push({ value: 38, name: element.name }); }); this.xunshiMap = arr; this.xunshiPer = arr1; this.xunshiPer1 = arr2; this.qxArr = arr4; this.xqArr = arr2; this.xsArr = arr3; setTimeout(this.renderEachCity, 0); this.echartCity(); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
vue实现循环滚动列表
本文实例为大家分享了vue实现循环滚动列表的具体代码,供大家参考,具体内容如下 1.安装 vue-seamless-scroll 实例文档链接 cnpm install vue-seamless-scroll --save 2.文件中引入,组件配置 import vueSeamlessScroll from 'vue-seamless-scroll' 3.使用 <template> <vue-seamless-scroll :data="CardPartsStatistic
-
vue中 v-for循环的用法详解
1.v-for循环普通数组 ①创建vue对象 ② 循环数据 结果: 2.v-for循环对象数组 ① 创建vue实例对象 ② 循环对象数组 结果: 3.v-for循环对象 ①创建vue对象实例 ②循环对象 结果: 4.v-for循环数字 ①创建vue对象实例 ②循环数字 结果: 5.v-for中key的使用方式 ①创建vue对象实例 注意:push()方法一般是添加到数组的最后的位置:unshift()方法是往最前面的位置添加. ②循环 注意: v-for循环的时候,key属性只能使用number
-
Vue循环中多个input绑定指定v-model实例
Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢 这里介绍两种: 一种是v-for中循环生成的输入框, 一种是在element-table中生成的输入框 在循环中只要给定的v-model不一致就可以为输入框分别绑定,在循环中index每一项都是不一样的,你也可以使用字符拼接的方式,设置v-model对应的值为input1,input2.. 类似这样的,这样就可以通过绑定的值取到对应输入框
-
vue中的循环对象属性和属性值用法
v-for除了可以循环数组,还可以循环对象. 例子: <template> <div> <div v-for="(item,i) in obj">{{i}}--{{item}}</div> </div> </template> <script> export default { name: "HelloWorld", data () { return { obj:{ age:1, n
-
解决vue-router路由拦截造成死循环问题
笔记:vue-router路由拦截造成死循环,在做路由拦截的时候,一直出现死循环. router的index.js文件路由配置 const router = new Router({ routes: [{path: '/login',name: 'login',component: Login,meta: {isShow: true}}, {path: '/',component: Layout,redirect: '/home',meta: {title: "首页菜单"}, chil
-
vue循环中点击选中再点击取消(单选)的实现
没有展开时 点击展开之后 <div class="flashread_item_box_time"> <span class="moment_time">9分钟前</span> <div class="flashread_item_box_zan"> <span class="flashread_item_box_item"><i class="ico
-
vue中v-for循环选中点击的元素并对该元素添加样式操作
相信大家都会遇到这种情况:v-for循环时,我只需要点击到的元素做出相应反应,其他的元素不变:但是往往所有v-for循环出的元素都会变化.如下面的代码:我需要点击到的元素添加一个类样式,其他元素不变,但是这样会导致所有的元素都会变化 html: <div v-for = "(item,index) in items" :class = 'addclass:isactive' @click='onclick()'> <span>{{item.name}}</
-
Vue 实现v-for循环的时候更改 class的样式名称
在v-bind:class上绑定索引函数 <div v-for="(shop,index) in shoplist" style="max-width: 20rem;" v-bind:class="calculate(index)"> calculate(index) 此处必须添加index参数 data(){ return{ colorList:['primary','danger','secondary','info'] } },
-
解决vue中的无限循环问题
项目中遇到了这样一个问题:每一种产品有对应的服务费,每一个商家有多种商品要单独计算每一家的服务费,最后汇总总的服务费用.我直接写了一个方法来计算出每个商家和总的服务费用并return出来.如果不看控制台的话运行是没问题的.但是控制台报了无限循环的错误. 下面是错误代码 html: js: 这里会出现无限循环的原因是数据更新触发计算方法来更新视图,视图更新又反过来触发这个方法更新数据.所以尽量不要直接在绑定的数据上使用方法来绑定.找到问题后下面就是解决办法. 因为选中商品后就要重新计算价格.所以我
-
Vue如何循环提取对象数组中的值
1.数据如下,提取name和callcount 2代码. getQueryCallStatistics("sesp1", this.provinceId).then((res) => { let arr = []; let arr1 = []; let arr2 = []; let arr3 = []; let arr4 = []; this.xunshiMap = res.data.callstatistics; res.data.callstatistics.forEach(
-
vue更改数组中的值实例代码详解
根据下标更改时 vm为新建的vue对象 ind为数组 第一个e为在数组ind中e索引位置 第二个e为更改为值e vm.$set(vm.ind,e,e) 常规更改 arr为数组 //添加 arr.push(1); //删除 arr.splice(*,*); //替换 arr.splice(*,*,*); splice方法 实例 例子 1 在本例中,我们将创建一个新数组,并向其添加一个元素: <script type="text/javascript"> var arr = n
-
js判断一个对象是否在一个对象数组中(场景分析)
目录 场景: 第一个场景解法:如果数组中已经存在,就不能添加 小结: 第二个场景解法: 对象数组去重 场景: 有一个对象数组,如: var arr = [{"appName":"小何","appId":"1"},{"appName":"小王","appId":"2"}] 一般来说,常见的场景有两个: 第一个是,比如鼠标点击按钮,往数组里push()
-
js 根据对象数组中的属性进行排序实现代码
这篇文章主要介绍了js 根据对象数组中的属性进行排序实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 var arr = [ {name:'a',age:9}, {name:'b',age:12}, {name:'c',age:8} ]; arr.sort((a,b)=>{ return a.age - b.age }); function compare(property){ return function(a,b){ var
-
JS对象数组中如何匹配某个属性值
目录 对象数组中匹配某个属性值 对象数组取出对象属性值完全一样的项 对象数组中匹配某个属性值 如果有一个js对象数组,一个变量如下 var a = [ { 'id' : 2, 'name' : 'xxxx', }, { 'id' : 3, 'name' : 'bbbbb', }, ]; var b = 3; 我想要查询 变量b,是否在数组a的id值中,如果在,返回true:不在,返回false 写法如
-
php获取数组中键值最大数组项的索引值 原创
本文实例讲述了php获取数组中键值最大数组项的索引值的方法.分享给大家供大家参考.具体分析如下: 一.问题: 从给定数组中获取值最大的数组项的键值.用途如:获取班级得分最高的学生的姓名. 二.解决方法: <?php /* * Created on 2015-3-17 * Created by www.jb51.net */ $arr=array('tom'=>9,'jack'=>3,'kim'=>5,'hack'=>4); asort($arr); //print_r($ar
-
PHP list() 将数组中的值赋给变量的简单实例
list() PHP list() 用一步操作把数组中的值赋给一些变量.同 array() 一样,list() 不是真正的函数,而是语言结构. 语法: void list( mixed var, mixed ... )注意: list() 仅能用于数字索引的数组并假定数字索引从 0 开始. 例子1: <?php $arr_age = array(18, 20, 25); list($wang, $li, $zhang) = $arr_age; echo $wang; //输出:18 echo $
-
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
今天发现一个很好用二维数组排序的php方法,usort,推荐给大家,以后二维数组里面,要按照一个字段的值排序用这个方法简单高效,例如下面的数组: [guess_subject] => Array ( [0] => Array ( [subject_id] => 4587 [game_id] => 9228 [parent_category_id] => 78 [subject_title] => 全场比赛两队总得分之和是 [subject_date_time] =>
-
php计算多维数组中所有值总和的方法
本文实例讲述了php计算多维数组中所有值总和的方法.分享给大家供大家参考.具体实现方法如下: php 内置函数 array_sum() 函数返回数组中所有值的总和,只能返回一维数组的总和: 计算多维数组所有值的和就要自定义函数了: function get_sum($array) { $num = 0; foreach($array as $k => $v) { if(is_array($v)) { $num += get_sum($v); } } return $num + array_sum
-
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
array_count_values()定义和用法 array_count_values() 函数用于统计数组中所有值出现的次数. 本函数返回一个数组,其元素的键名是原数组的值,键值是该值在原数组中出现的次数. 语法 array_count_values(array) 参数 描述 array 必需.规定输入的数组. 例子 复制代码 代码如下: <?php $a=array("Cat","Dog","Horse","Dog"
随机推荐
- Golang实现的聊天程序服务端和客户端代码分享
- CentOS 7下安装PostgreSQL 9.6的教程分享
- 延长笔记本电脑光驱寿命的十大法则
- DOS命令全集(三)
- oracle不能使用EM怎么办 oracle11g如何正确安装配置EM
- Nginx配置PHP的Yii与CakePHP框架的rewrite规则示例
- Asp.net导出Excel/Csv文本格式数据的方法
- JavaScript中点击事件的写法
- Javascript写入txt和读取txt文件示例
- MySQL的日志基础知识及基本操作学习教程
- CentOS6.4安装Apache+MySQL+PHP图文教程
- jQuery学习笔记之 Ajax操作篇(三) - 过程处理
- jQuery实现切换页面布局使用介绍
- javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
- Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
- Android Application存取公共数据的实例详解
- Android入门之使用eclipse进行源码开发的方法
- 详解PHP的Yii框架中日志的相关配置及使用
- js 可拖动列表实现代码
- vue实现的上拉加载更多数据/分页功能示例