computed 计算属性

<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>

 

网页效果：