Thực hành với VueJS - Computed Properties

Trong property data của đối tượng Vue chúng ta có một message, một array, hay một object... và đôi khi chúng ta muốn biến hóa chúng một chút, tính toán với chúng trước khi hiển thị chúng trên trang. Chẳng hạn như, chúng ta muốn đảo ngược thuộc tính message trong data và hiển thị nó lên.

Sử dụng các biểu thức logic ở ngay trong template là rất thuận tiện. Như thế này:

<div id="example">
 {{ message.split(').reverse().join(') }}
</div>

Tuy nhiên việc sử dụng logic trong template sẽ khiến template cồng kềnh và khó bảo trì, đặc biệt sẽ có vấn đề khi bạn phải sử dụng nó nhiều lần trong template.

Khi ấy, chúng ta sẽ sử dụng computed properties, viết một hàm trả về message đảo ngược và khi cần chỉ cần render chúng ra

<div id="root">
    <p>
        {{ reverseMessage }}
    </p>
</div>

var app = new Vue({
    el: '#root',
    data:{
        message: "Hello"
    },
    computed: {
        reverseMessage(){
            return this.message.split(').reverse().join(');
        }
    }
})

Ở bên trên mình chỉ nêu qua tại sao phải sử dụng computed properties, các bạn muốn hiểu sâu hơn về properties và sự khác nhau giữa properties và methods, các bạn hãy ghé qua https://vuejs.org/v2/guide/computed.html

Sau đây chúng mình cùng đi đến những ví dụ thực hành với computed properties nhé