<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>計(jì)算屬性中的：get/set方法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{all}}</h1>
</div>
</body>
<script type="text/javascript">
let app = new Vue({
el:’#app’,
data:{
firstnames:’Koby’,
lastnames:’Bye’
},
//計(jì)算屬性包含了get、set兩種方法
computed:{
//最常見的寫法all:{set:function(){},get:function(){}}
// all:{
// //當(dāng)屬性被修改或被重新設(shè)置時(shí)，重新出現(xiàn)
// //可用于觸發(fā)使用：當(dāng)某些值改變的時(shí)候，觸發(fā)計(jì)算屬性set方法
// set:function(res){
// let names = res.split(‘ ‘);
// this.lastnames = names[0];
// this.firstnames = names[1];
// },
// //未發(fā)生改變，獲取值
// //通常使用get方式多，因?yàn)橛?jì)算屬性一般不需要使用修改或設(shè)置屬性
// get:function(){
// return this.firstnames + ‘ ‘ + this.lastnames
// }
// },
//簡(jiǎn)化寫法，直接get方法，不再包含set
all:function(){
return this.firstnames + ‘ ‘ + this.lastnames;
}
}
})
</script>
</html>
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)
收藏
