带你深度吃透Vue3 中计算属性 computed() 的使用
warning:
这篇文章距离上次修改已过280天，其中的内容可能已经有所变动。
<template>
<div>
<h1>{{ reversedMessage }}</h1>
</div>
</template>
<script>
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
setup() {
const message = ref('Hello Vue 3!');
// 使用计算属性创建一个响应式的反转消息
const reversedMessage = computed(() => message.value.split('').reverse().join(''));
// 返回计算属性供模板访问
return {
reversedMessage
};
}
});
</script>这个例子中，我们创建了一个计算属性 reversedMessage，它会根据响应式依赖 message 的当前值动态生成一个新的字符串，将其反转并展示在模板中。这展示了计算属性在Vue 3中的基本用法。
评论已关闭