上一节了解的是计算属性的默认简写,只能读取,不能修改。
什么意思呢?很简单,我们知道计算属性是依赖数据动态计算一个值,那我可不可以直接this.计算属性 = xxx 来修改计算属性的结果呢?这其实是不行的!因为上一节中我们写的是计算属性的默认简写,只能够读取数据,如果要进行修改,必须写它的完整形式。
Vue 中计算属性的完整写法涉及到定义一个对象,该对象包含 get
和 set
方法,分别用于获取和设置计算属性的值。这种写法允许我们不仅在依赖其他数据时动态计算一个值,还能监听对该计算属性的直接赋值操作,并在值被设置时执行相应的逻辑。
实例:改名卡
实现功能:
依赖Vue实例数据动态显示姓和名,同时根据表单输入更改姓和名。
思路:
使用get()方法动态渲染,然后使用v-model绑定表单输入,同时使用set()方法修改Vue实例数据,最后再次使用get()方法动态渲染。
代码:
html:
<div id="app">
姓:<input v-model="firstName" type="text"> +
名:<input v-model="lastName" type="text"> =
<span>{{ fullName }}</span>
<br>
改名:<input @keyup.enter="changeName()" v-model="newname" style="width: 100px;">
<button @click="changeName()">改名卡</button>
</div>
js:
<script>
const app = new Vue({
el: '#app',
data: {
firstName: '马',
lastName: '超',
newname: ''
},
methods: {
// 该函数不能设置computed的属性
changeName(){
this.fullName = this.newname
}
},
// 计算属性完整写法:get()+set(),获取和修改
// 修改的底层逻辑:首先修改的值被传递给set()的形参
// 然后修改数据,最后再执行一遍get()
computed: {
fullName:{
get(){
return this.firstName + this.lastName
},
//对字符串进行切片处理获得姓和名
set(value){
this.firstName = value.slice(0,1)
this.lastName = value.slice(1)
}
}
}
})
</script>