计算属性的getter和setter
getter
每一个计算属性中都有一个getter和setter
当调用计算属性的时候, 就会默认自动调用getter这个方法
setter
当在设置或者更改计算属性的时候调用setter方法
这个方法有个默认参数newValue,这个newValue名称可以自己定义,
计算属性一般是没有setter方法,计算属性是只读属性,一般不会更改这个计算属性
demo
<script>
export default {
data () {
return {
message: 'helloworld'
}
},
methods: {
},
/**
* 计算属性
* 计算属性默认只有getter, 不过在需要时我们也可以提供一个setter
*/
computed: {
/**
* 计算属性的简写
*/
reverseMsg: function () {
console.log('计算属性调用,简写')
return this.message.split('').reverse().join('')
},
/**
* 计算属性的完整写法
* 每一个计算属性中都有一个getter和setter
*
* 当调用reverseMessage 这个计算属性的时候, 就会自动调用getter这个方法
*
* 当在设置或者更改计算属性的时候调用setter方法,
* 这个方法有个默认参数newValue,这个newValue名称可以自己定义,
* 计算属性一般是没有setter方法,计算属性是只读属性,一般不会更改这个计算属性
*/
reverseMessage:{
get:function(){
console.log('计算属性调用,自动调用getter方法')
return this.message.split('').reverse().join('')
},
set:function(newValue)
{
// newValue, 计算属性更改后的新值
console.log('当在设置或者更改计算属性的时候调用,newValue的值为',newValue)
// 把新值赋给 message
this.message = newValue
}
}
}
}
</script>
<template>
<!-- template就是模版 -->
<div>
<p>{{ message }}</p>
<p>计算属性的简写: {{ reverseMsg }}</p>
<p>计算属性的完整写法: {{ reverseMessage }}</p>
<p><button @click="reverseMessage='你好呀, 小虾米'">改变计算属性的值</button></p>
</div>
</template>
<style></style>