计算属性
<body>
<div id="app">
<p>{
{msg}}</p>
<p>{
{ reverseMsg}}</p>
<hr>
<button @click="msg='hello world'">{
{reverseMsg}}</button>
<hr>
<p>{
{num}}</p>
<p>{
{ doubleNum }}</p>
<button @click=" doubleNum = 12">修改doubleNum</button>
</div>
</body>
<script>
Vue.createApp({
data(){//普通属性
return {
msg:'welcom to vue',
num:4
}
},
computed:{//计算属性
reverseMsg:function(){//函数要有返回值,用来获取属性,称为get函数
return this.msg.toUpperCase().split(' ').reverse().join(' ')
},
doubleNum:{//同时指定get和set函数
get:function(){ //获取计算后的值
return this.num *2
},
set:function(val