下载掌阅APP，畅读海量书库
立即打开
在业务逻辑处理中，一般会使用v-for指令渲染列表的内容，有时也会使用v-if指令的条件判断过滤列表中不满足条件的列表项。实际上，这个功能也可以使用计算属性来完成。
【例3.9】 使用计算属性代替v-for和v-if（源代码\ch03\3.9.html）。
在Chrome浏览器中运行程序，结果如图3-11所示。
图3-11 使用计算属性代替v-for和v-if
从上面的示例可以发现，计算属性可以代替v-for和v-if组合的功能。在处理业务时，推荐使用计算属性，这是因为即使v-if指令的使用只渲染了一部分元素，但在每次重新渲染的时候仍然要遍历整个列表，而无论渲染的元素内容是否发生了改变。
采用计算属性过滤后再遍历，可以获得一些好处：过滤后的列表只会在goodss数组发生相关变化时才被重新计算，过滤更高效；使用v-for="goods in outGoodss"之后，在渲染的时候只遍历已出库的商品，渲染更高效。