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