Thông điệp ban đầu: "{{ message }}"
Thông điệp bị đảo ngược bằng tính toán (computed): "{{ reversedMessage }}"
<!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>