计算属性：常用于逻辑比较复杂的计算，根据已有的数据，计算出一个新的数据。计算属性具有缓存机制，复用性强，效率更高。
计算属性【简写方式】：
<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 参数就是被修改的值。
