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学习笔记 delete运算符
Sep 13 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
js+html制作简单验证码
Feb 16 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
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 验证码制作(网树注释思想)
2009/07/20 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
python获取txt文件词向量过程详解
2019/07/05 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
一个C/C++编程面试题
2013/11/10 面试题
个人应聘自我评价分享
2013/11/18 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
企业理念标语
2014/06/09 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
主持稿开场白
2015/06/01 职场文书
党员身份证明材料
2015/06/19 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
Oracle11g R2 安装教程完整版
2021/06/04 Oracle
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python