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