Thông điệp ban đầu: "{{ message }}"

Thông điệp bị đảo ngược bằng tính toán (computed): "{{ reversedMessage }}"

Code

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body style="font-size: 30px">
<div id="example">
  <p>Thông điệp ban đầu: "{{ message }}"</p>
  <p>Thông điệp bị đảo ngược bằng tính toán (computed): "{{ reversedMessage }}"</p>
</div>
<script>
    var vm=new Vue({
        el:'#example',
        data:{
            message:'người đông bến đợi thuyền xuôi ngược'
        },
        computed:{
            //một computed getter
            reversedMessage:function(){
                //'this' trỏ tới đối tượng vm
                return this.message.split(' ').reverse().join(' ');
            }
        }
    });
</script>
</body>
</html>