vue.js起步(自动计算总价格)
<div id="example">
<p>{{msg}}</p>
<ul>
<li v-for="item in msg">{{item.a}}
<input type="text" v-on:change="aa" v-model="item.c">
{{item.b}}
</li>
</ul>
<p>{{d}}</p>
</div>
<script>
var vm = new Vue({
el: '#example'
, data: {
msg:[{"a":"a1","b":10,"c":0},{"a":"a2","b":20,"c":1},{"a":"a3","b":30,"c":1}] }
, computed: {
// 一个计算属性的 getter
d:function(){
var len=this.msg.length;
var all=0;
for(var i=0;i<len;i++){
var li=parseInt(this.msg[i].b*this.msg[i].c);
all+=li;
}
return all;
}
},
methods:{
aa:function(){
var len=this.msg.length;
var all=0;
for(var i=0;i<len;i++){
var li=parseInt(this.msg[i].b*this.msg[i].c);
all+=li;
}
}
}
})
</script>

浙公网安备 33010602011771号