<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>6Vue 计算属性的setter和getter</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">{{fullName}}{{position}}</div>
<script>
var vm = new Vue({
el: '#app',
data: {
state: 'China',
province: 'Guangdong',
position: 'south'
// fullName: 'China Guangdong' //数据冗余
},
// 计算属性
computed: {
// fullName: function () {
// console.log('计算了一次');
// return this.state + " " + this.province
// },
// 等价于
fullName: {
get: function () {
return this.state + " " + this.province
},
set: function (value) {
console.log(value);
var arr = value.split(' ');
this.state = arr[0]
this.position = arr[1]
}
}
},
})
</script>
</body>
</html>
网友评论