先看代码:
<template>
<div>
<h4>计算属性完整写法</h4>
<input type="text" v-model="username">
</div>
</template>
<script>
export default {
computed:{
username(){
return '刘德华'
}
}
}
</script>
<style>
</style>
什么原因呢:
首先这个报错的前提是你在计算属性computed中获取了name,但是你又在页面其他地方直接修改name的值就会报这个错
解决方法 :
<template>
<div>
<h4>计算属性完整写法</h4>
<input type="text" v-model="username">
</div>
</template>
<script>
export default {
/***
* 语法:
* computed:{
'计算属性名':{
set(值){
},
get(){
return 值
}
}
}
*/
computed:{
username:{
//给usename赋值触发set方法
set(val){
console.log(val);
},
//使用username的值触发get方法
get(){
return '刘德华'
}
}
}
}
</script>
<style>
</style>
何时使用计算属性完整写法?
给计算属性变量赋值的时候
set函数和get函数什么执行?
set接收要赋予的值
get里要返回这个计算属性具体值