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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

new Vue({
el: '#app',
data:{message:"good good study"},
computed:{
  reverseMessage:function(){   //reverseMessage 是一個function, 定義執行的函式
  return this.message.split("").reverse().join("")  }  
  }
})

</script>
 

例子說明：

vue 部分

new Vue({ el: '#app', data:{message:"good good study"},                      //定義資料屬性message屬性值computed:{                                                     //computed計算屬性，裡面寫的是定義的函式。定義了reverseMessage 這個函式     reverseMessage:function(){                              //reverseMessage 是一個function     return this.message.split("").reverse().join("")  }  //函式返回了 this.message 翻轉後的屬性值 

html 部分

<div id="app">

 <p>message:{{ reverseMessage}}</p>   <p>reverseMessage:{{ reverseMessage}}</p>            //返回 reverseMessage 定義函式最後的值 </div>

網頁效果：