vue 3 学习笔记 ——vue3 中 computed 新用法
<template>
<div>
<p>计算后的值: {{ computedMessage }}</p>
</div>
</template>
<script>
import { computed, ref } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3!');
// 使用函数配合 ref 创建响应式的计算属性
const computedMessage = computed(() => message.value.split('').reverse().join(''));
// 返回到模板中使用
return {
message,
computedMessage
};
}
};
</script>这个例子中，我们创建了一个响应式的计算属性 computedMessage，它会根据 message 的当前值动态生成一个新的字符串，这个字符串是将 message 字符串的字符顺序反转后的结果。这里使用了 computed 函数，它接受一个 getter 函数作为参数，并根据 message 的当前值返回计算后的值。在模板中，我们直接展示 computedMessage，它会根据 message 的当前值自动更新显示的内容。
评论已关闭