第20节: Vue3 计算属性

2023-12-14 11:48:33

在UniApp中使用Vue3框架时,你可以使用计算属性来处理一些依赖其他属性的计算逻辑。计算属性会根据依赖属性的变化自动重新计算,并且只会在相关依赖发生改变时触发重新渲染。

下面是一个示例,演示了如何在UniApp中使用Vue3框架使用计算属性:

<template>  
  <view>  
    <input v-model="firstName" placeholder="First Name" />  
    <input v-model="lastName" placeholder="Last Name" />  
    <text>Full Name: {{ fullName }}</text>  
  </view>  
</template>  
  
<script setup>  
import { ref, computed } from 'vue';  
  
const firstName = ref('');  
const lastName = ref('');  
  
const fullName = computed(() => {  
  return firstName.value + ' ' + lastName.value;  
});  
</script>

在上面的示例中,我们定义了两个响应式引用对象firstName和lastName,分别用于存储名字和姓氏。然后,我们使用computed()函数创建了一个计算属性fullName。fullName的计算逻辑是将firstName和lastName的值拼接起来,并在它们之间添加一个空格。由于fullName依赖于firstName和lastName,因此当这两个属性中的任何一个发生变化时,fullName的值都会自动重新计算。

在模板中,我们可以像使用普通属性一样使用计算属性fullName。当firstName或lastName的值发生变化时,模板中的文本会自动更新为最新的全名。

通过使用计算属性,我们可以将复杂的计算逻辑从模板中分离出来,并在数据变化时自动更新相关的属性值。这可以提高代码的可读性和可维护性,并使逻辑更加清晰和可测试。

订阅专栏,每日更新

第19节:Vue3 在模板中展开时的注意事项

文章来源:https://blog.csdn.net/weixin_54226053/article/details/134989011
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。