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

 更新时间:2018年03月07日 14:51:52   作者:huang100qi  
下面小编就为大家分享一篇vue2.0 computed 计算list循环后累加值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

实例如下所示:

<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循环后累加值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解在vue-test-utils中mock全局对象

    详解在vue-test-utils中mock全局对象

    这篇文章主要介绍了详解在vue-test-utils中mock全局对象,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • VueCli4项目配置反向代理proxy的方法步骤

    VueCli4项目配置反向代理proxy的方法步骤

    这篇文章主要介绍了VueCli4项目配置反向代理proxy的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • vue el-table实现多选框回填的示例代码

    vue el-table实现多选框回填的示例代码

    摘要:Vue多选框回填是实现表单数据高效处理的常见需求,本文主要介绍了vue el-table实现多选框回填的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • TDesign在vitest的实践示例详解

    TDesign在vitest的实践示例详解

    这篇文章主要为大家介绍了TDesign在vitest的实践示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 安装vue/cli后查看版本显示找不到vue指令的解决

    安装vue/cli后查看版本显示找不到vue指令的解决

    这篇文章主要介绍了安装vue/cli后查看版本显示找不到vue指令的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue 先初始化父组件再初始化子组件的方法(自定义父子组件mounted执行顺序)

    Vue 先初始化父组件再初始化子组件的方法(自定义父子组件mounted执行顺序)

    这篇文章主要介绍了Vue 先初始化父组件再初始化子组件的方法(自定义父子组件mounted执行顺序),本篇内容内容主要讲述了,在使用 Konva 进行开发过程中遇到的一些问题,需要的朋友可以参考下
    2024-07-07
  • vue使用v-for循环获取数组最后一项

    vue使用v-for循环获取数组最后一项

    这篇文章主要介绍了vue使用v-for循环获取数组最后一项问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • el-table渲染慢卡顿问题最优解决方案

    el-table渲染慢卡顿问题最优解决方案

    本文主要介绍了el-table渲染慢卡顿问题最优解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 浅谈vux之x-input使用以及源码解读

    浅谈vux之x-input使用以及源码解读

    这篇文章主要介绍了浅谈vux之x-input使用以及源码解读,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Vue SPA 如何解决浏览器缓存问题

    Vue SPA 如何解决浏览器缓存问题

    这篇文章主要介绍了Vue SPA 如何解决浏览器缓存问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论