Vue:计算属性

姓王者

发布于 2024-10-31 18:47:40

1100

文章被收录于专栏：姓王者的博客

我们为什么需要计算属性

全名：<span>{{firstName + '-' + lastName}}</span><br>

vue官方不建议我们在模板这么写，这看起来过于复杂

示例代码


<template>
    <div class="person">
        姓：<input  type="text" v-model="firstName"> <br>   
        名：<input type="text" v-model="lastName"> <br>
        全名：<span>{{fullName}}</span><br>
        <button @click="changeName">修改姓名</button>
        <!-- 全名 <span>{{firstName}}-{{lastName}}</span> <br> -->
    </div>
</template>


<script setup   lang="ts" name="Personsss">
import {computed, ref} from 'vue'
let firstName= ref('章');
let lastName = ref('礼');
let fullName =computed(
()=>firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+lastName.value
);

</script>

首先我们需要导入computed 然后使用这个计算属性定义fullName 通过这个方法，使得模板变得简易，可读性变高

计算属性默认只可读

事实上如果我在里面定义一个函数

function changeName(){
fullName.value='李四'
}

这个changeName函数会报错 无法为“value”赋值，因为它是只读属性。 这是计算属性的只读特性

如何修改？

如果想要修改计算属性的值，我们需要get和set方法

例如来自于vue官方文档

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

你发现了吗，这种修改本质上还是修改了firstName和lastName,那我们不禁想到，为什么我们不直接修改这两个的值，来实现通过计算属性更新fullName的值呢？