标签：span 加载 end button rem 数组 jpg src when
上一篇里演示了计算属性的优点，但是，computed和data里的属性还是有区别的，computed的一个弱点就在于依赖于data属性的更新，才能触发视图更新。
举个例子：
上个例子中谈到用v-for来加载妹子图片，现在我想在原先的基础上，添加两个按钮,一个用来增加一个妹子,一个用来减少一个妹子：
html:
<div id="vfor"> <template v-for="mm in mms"> <span>{{mm.name}}</span> <image :src="mm.location"></image> </template> <button @click="addM">增加一个mm</button> <button v-on:click="removeM">减少一个mm</button> </div>
js:
var app14=new Vue({ el:‘#vfor‘, data:{ mms:[{name:‘mm1‘,location:‘http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg‘}, {name:‘mm2‘,location:‘http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg‘}, {name:‘mm3‘,location:‘http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg‘}, {name:‘mm4‘,location:‘http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg‘} ], methods:{ addM:function(){//增加一个MM var len=this.mms.length; function mmCreate(i){ var mmX={}; mmX.name=‘mm‘+i; mmX.location=‘http://image.zhangxinxu.com/image/study/s/s128/mm‘+i+‘.jpg‘; return mmX; } }, removeM:function(){//减少一个MM this.mms.pop(); } } });
这里通过button分别触发addM()和removeM()方法，分别为mms数组增加一个元素和减少一个元素，实现了视图上的MM的增加和减少。
现在，我觉得初始化data里的mms属性太麻烦，所以准备在computed里面，用一个循环来初始化mms:
js:
computed:{ mms:function(){ var arr=[]; for(var i= 1;i<4;i++){ var temObj={}; temObj.name=‘mm‘+i; temObj.location=‘http://image.zhangxinxu.com/image/study/s/s128/mm‘+i+‘.jpg‘; arr.push(temObj); } return arr; } }
通过一个函数返回arr。注意这里的computed属性没有依赖任何的data属性。
这样做，对于初始化mms来说是没问题的。但是当点击增加一个mm按钮时，视图并没有更新，尽管mms数组发生了变化。原因就是上面所说的
computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed.
标签：span 加载 end button rem 数组 jpg src when
原文地址：http://www.cnblogs.com/imgss/p/6032032.html
