Vue中的computed屬性是一種非常強大的工具,可以方便地在模板中使用計算屬性。這篇文章將介紹computed屬性如何累加數值。
<div id="app"> <p>{{sum}}</p> <button v-on:click="add">Add 1</button> </div> <script> new Vue({ el: '#app', data: { count: 0 }, computed: { sum: function() { return this.count; } }, methods: { add: function() { this.count++; } } }) </script>
在上面的代碼塊中,我們定義了一個計數器count和一個計算屬性sum。sum的值等于count。每當我們調用add方法時,count的值會增加1。由于sum依賴于count的值,因此sum也會更新。
通過使用computed屬性,我們可以輕松地管理依賴關系,并且只在需要時更新值。這樣可以使我們的代碼更具可讀性和可維護性。