一.定义
要用的属性不存在,只能通过已有属性计算得来。
二.原理
底层借助Object.defineproperty方法提供的getter和setter
三.实例
在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例(计算属性)</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="root">
姓: <input type="text" v-model="firstName">
名: <input type="text" v-model="lastName">
姓名: <span>{{fullName}}</span>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
computed:{
fullName:{
// 当有人读取fullName时,get就会被调用,且返回值作为fullName的值
get(){
return this.firstName + '-' + this.lastName
},
// set只在fullName被修改的时候才被调用
set(value){
//split按照指定字符把字符串拆成数组
const arr = value.split('-')
firstName = arr[0]
lastName = arr[1]
}
}
// 当确定不会修改的时候可以简写下面的形式
// fullName(){
// return this.firstName + '-' + this.lastName
// }
}
})
</script>
</body>
</html>