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