属性 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
更多推荐
Vue计算属性 computed
发布评论