最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 22:17:53
文档

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

vue2.0 computed 计算list循环后累加值的实例:实例如下所示: <template> <div class=hello> <h1>{{ msg }}</h1> <h2>Foo</h2> <div v-for =(item, index) in list> <!--<p>{{item }}
推荐度:
导读vue2.0 computed 计算list循环后累加值的实例:实例如下所示: <template> <div class=hello> <h1>{{ msg }}</h1> <h2>Foo</h2> <div v-for =(item, index) in list> <!--<p>{{item }}


实例如下所示:

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

文档

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

vue2.0 computed 计算list循环后累加值的实例:实例如下所示: <template> <div class=hello> <h1>{{ msg }}</h1> <h2>Foo</h2> <div v-for =(item, index) in list> <!--<p>{{item }}
推荐度:
标签: VUE 计算 案例
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top