vue 计算属性

有时候我们可能需要在{{}}里进行一些计算在展示出来数据: 

class="app"> border="1"> > >学科> >分数> > > > >数学> >type="text" v-model="Math">> > > >英语> >type="text" v-model="English">> > > >化学> >type="text" v-model="chemistry">> > > >总分> >{{Math + English + chemistry}}> > > >平均分> >{{(Math + English + chemistry)/3}}> > > > >
var app = new Vue({ el:'.app', data:{ Math:88, English:77, chemistry:99, } });

虽然能解决问题,但是特别不不清晰。
这种情况下,vue给我们提供了一个特别好的解决方案:计算属性
我们可以把这些计算的过程写到一个计算属性中去,然后让它动态的计算就可以了。
计算属性是vue实例中的选项:computed
通常里面每一个都是计算相关函数,返回最后计算出来的值。

>
class="app">
border="1"> > >学科> >成绩> > > > >数学> >type="text" v-model.number="Math">> > > >英语> >type="text" v-model.number="English">> > > >化学> >type="text" v-model.number="chemistry">> > > >总分> >{{sum}}> > > >平均分> >{{average}}> > > > >

你可能感兴趣的:(vue 计算属性)