1. computed计算属性
计算属性最常见的写法就是函数写法:
<template>
<div class="home">
{
{
formMsg}}
<button @click="formMsg = '胡崽崽'">点击修改</button>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
msg: 'hello'
}
},
computed: {
formMsg() {
// 必须要有返回值,没有return值为undefined,计算属性作为属性({
{formMsg}})去使用
return this.msg.split('').reverse().join('')
}
}
}
</script>
当我们去点击按钮修改formMsg
的值时,浏览器会报错
这是因为计算机属性不能直接赋值,它里面没有设置set
属性,我们可以为其添加一个set
属性
<template>
<div class="home">
{
{
formMsg}} // 会显示:胡崽崽
<button @click="formMsg = '胡崽崽'"