参考代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>getter及setter的使用</title>
</head>
<body>
<div id="app">
<input type="text" v-model="title" />
<input type="text" v-model="name" />
<input type="button" value="修改计算属性" @click="changName">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
title: "aaaa",
name: "bbbb",
},
methods: {
changName(){
this.fullName="cccc-dddd";
}
},
computed:{
fullName:{
get:function(){
return this.title+this.name;
},
set:function(newVal){
var parts=newVal.split('-');
this.title=parts[0];
this.name=parts[1];
}
}
}
});
</script>
</body>
</html>