1. 程式人生 > 實用技巧 >計算屬性中的get和set的方法

計算屬性中的get和set的方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{allNum}}
<hr>
<h1>{{allSum}}</h1>
</div>
<script>
let vm= new Vue({
el:'#app',
data:{
msg:'今天是週一',
xName:100
},
computed:{
allNum(){
return 100
},
allSum:{
get(){
return this.xName
},
set(val){
console.log(val,'設定的值')
this.xName = val
}
}
}
})
vm.allSum = 500
</script>
</body>
</html>

<!-- allNum(){
return 100
},
這種寫法,相當於
allSum:{
get(){
return this.xName
}
} -->