Vue计算属性 computed

属性 computed"/>

Vue计算属性 computed

计算属性：常用于逻辑比较复杂的计算，根据已有的数据，计算出一个新的数据。计算属性具有缓存机制，复用性强，效率更高。

 计算属性【简写方式】：

<template><div>提现金额：<input type="number" v-model="num"></div><p>注：提现扣除5%手续费</p><p>实际到账：￥{{ money }}</p>
</template><script>
// 引入 computed 计算属性
import { computed, ref } from 'vue'
export default {name: "Home",setup() {// 用户输入的金额let num = ref(0);// 计算属性 - 简写方式const money = computed(() => {return (num.value * 0.95).toFixed(2);})// 返回数据return { num, money }}
}
</script>

注：在简写方式中，不能直接修改计算属性的值。

 计算属性【完整写法】：

<template><div>提现金额：<input type="number" v-model="num"></div><p>注：提现扣除5%手续费</p><p>实际到账：￥{{ money }}</p><button @click="money = 100">提现100元</button>
</template><script>
// 引入 computed 计算属性
import { computed, ref } from 'vue'
export default {name: "Home",setup() {// 用户输入的金额let num = ref(0);// 计算属性 - 完整写法const money = computed({get() {return (num.value * 0.95).toFixed(2);},set(value) {num.value = (value / 0.95).toFixed(2);}})// 返回数据return { num, money }}
}
</script>

 注：set 函数会在计算属性被修改时调用，value 参数就是被修改的值。

原创作者：吴小糖

创作事件：2023.11.9