Vue的computed屬性是一個非常有用的特性，使用computed屬性可以實現方便的列表渲染，我們下面來看一下如何使用computed屬性實現列表。

<div id="app">
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }} 售價：{{ item.price }} 元，優惠價：{{ item.sale_price }} 元
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [
{ id: 1, name: '商品1', price: 100, discount: 0.8 },
{ id: 2, name: '商品2', price: 200, discount: 0.9 },
{ id: 3, name: '商品3', price: 300, discount: 0.7 },
{ id: 4, name: '商品4', price: 400, discount: 0.6 },
{ id: 5, name: '商品5', price: 500, discount: 0.5 }
]
},
computed: {
computedItems: function() {
return this.items.map(item => {
item.sale_price = item.price * item.discount;
return item;
});
}
}
});
</script>

上面的代碼中，我們使用了computed屬性來計算每個商品的優惠價，并把計算結果存儲在每個商品對象的sale_price屬性中，然后再把整個商品列表傳遞給v-for指令進行渲染。

使用computed屬性來計算列表數據的優點是可以避免動態計算數據造成的性能問題，同時也可以簡化代碼邏輯，讓代碼更加易讀易維護。