vue2.0 computed 计算list循环后累加值的实例


Posted in Javascript onMarch 07, 2018

实例如下所示:

<template>
 <div class="hello">
  <h1>{{ msg }}</h1>
  <h2>Foo</h2>
  <div v-for ="(item, index) in list">
  <!--<p>{{item }}</p>-->
  <h1 v-show="false">{{a[index] = item.bb}}</h1>
   <!-- <h1>index:{{index}}</h1>-->
  </div>
  <h2>a:{{a}}</h2>
  <h2>{{cc}}</h2>
  <!--<button v-on:click="cc">点击</button>-->
 </div>
</template>
<script>
export default {
 name: 'foo',
 data () {
  return {
   msg: '这儿是Foo',
   list:[{
     insertId: 'asfasf252',
     bb:29
   },{
    insertId: '2652',
     bb:20
   },{
    insertId: '996',
     bb:18
   }],
   a:[]
  }
 },
 computed:{
   cc: function(){
     var sum = 0;
     for(var i= 0 ;i< this.a.length; i++) {
        sum += parseInt(this.a[i]);
     }
     return sum;
   }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

以上这篇vue2.0 computed 计算list循环后累加值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 Javascript
Vue中v-for的数据分组实例
Mar 07 #Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 #Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 #Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 #Javascript
在vue项目中,使用axios跨域处理
Mar 07 #Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 #Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 #Javascript
You might like
在php和MySql中计算时间差的方法
2011/04/22 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
PHP类的反射用法实例
2014/11/03 PHP
php生成gif动画的方法
2015/11/05 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
js 事件小结 表格区别
2007/08/13 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
js实现碰撞检测
2021/01/29 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
启动targetcli时遇到错误解决办法
2017/10/26 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
Django admin组件的使用
2020/10/24 Python
python 操作excel表格的方法
2020/12/05 Python
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
皮肤科医师岗位职责
2013/12/04 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
停课通知书
2015/04/24 职场文书
纪委立案决定书
2015/06/24 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis