Vue.js计算属性详解：优雅处理数据逻辑和传递参数
<template>
<div>
<p>{{ reversedMessage }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue.js!'
};
},
computed: {
// 计算属性 reversedMessage 将自动依赖于 `message` 的变化
// 并且会缓存计算结果，只有 `message` 发生变化时，才会重新计算
reversedMessage() {
return this.message.split('').reverse().join('');
}
}
};
</script>这个例子中，我们定义了一个计算属性 reversedMessage，它会将数据属性 message 里的字符串反转。这个计算属性被定义在 computed 选项内，它是一个函数，Vue.js 会自动处理它的依赖和缓存结果，只有当 message 发生变化时，才会重新计算这个属性。这样的处理方式使得我们可以将数据的变化逻辑放在计算属性中，而不是在模板中直接写复杂的表达式，使得模板更加清晰易懂。
评论已关闭