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 相关文章推荐
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
微信小程序生成二维码的示例代码
Mar 29 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 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
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
laravel model 两表联查示例
2019/10/24 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
python 连续不等式语法糖实例
2020/04/15 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
耐克中国官方商城:Nike中国
2018/10/18 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
计算机专业个人求职信范例
2013/09/23 职场文书
岗位职责范本
2013/11/23 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang