在Vue中的computed选项中,定义了一个计算属性reversedMessage,它提供的函数将作为属性reversedMessage的getter方法,返回变量message反转后的字符串,通过
{{resversedMessage}}
显示出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{reversedMessage}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello Vue!'
},
computed:{
//计算getter
reversedMessage: function(){
//this指向当前Vue的实例
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>