v-model实现多个数据异步更新

众所周知vue的v-model就相当于一个value属性，当然只能使用于有value属性的元素上，v-model属性的含义就是双向数据绑定，来上代码一看就懂

<template>
    <div>
        <input type="number" v-model="num">
        <input type="number" v-model="num">
    </div>
</template>
<script setup>
import { ref } from "vue";
const num = ref()
</script>
<style scoped></style>

效果如下：

·

QQ录屏20230320131208

当然这只是基础，我们还可以对v-model进行一系列操作来看以下这串代码

<div>提现金额<p><input v-model="jine" type="text"></p></div>
    
<div>实际到账<p><input v-model="daozhang" type="text"></p></div>

这是一个提现功能的计算，当提现金额超过500时，手续费40%。

const jine = ref()
const daozhang = ref()
watch(() => {
    if (jine.value) {
        if (jine.value >= 0) {
            if (jine.value >= 500) {
                daozhang.value = (jine.value - 500) * 0.4 + 500
                daozhang.value = daozhang.value.toFixed(2)
            } else {
                daozhang.value = jine.value
            }
        } else {
            daozhang.value = ''
        }
    }
    if (jine.value == '') {
        daozhang.value = ''
    }
})