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

简介: 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>

效果如下:image.png

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 = ''
    }
})


相关文章
|
8月前
|
编译器 数据处理 C#
C#中的异步流:使用IAsyncEnumerable<T>和await foreach实现异步数据迭代
【1月更文挑战第10天】本文介绍了C#中异步流的概念,并通过使用IAsyncEnumerable<T>接口和await foreach语句,详细阐述了如何异步地迭代数据流。异步流为处理大量数据或需要流式处理数据的场景提供了一种高效且非阻塞性的方法,使得开发者能够更优雅地处理并发和数据流问题。
|
TensorFlow 算法框架/工具
【tensorflow】TF1.x保存与读取.pb模型写法介绍
由于TF里面的概念比较接地气,所以用tf1.x保存.pb模型时总是怕有什么操作漏掉了,会造成保存的模型是缺少变量数据或者没有保存图,所以先明确一下:用TF1.x保存模型时只需要保存模型的输入输出的变量(多输入就保存多个),不需要保存中间的变量;用TF1.x加载模型时只需要加载保存的模型,然后读一下输入输出变量(多输入就读多个),不需要初始化(反而会重置掉变量的值)。
180 0
|
3月前
|
前端开发 JavaScript
Async/Await 如何通过同步的方式(形式)实现异步
Async/Await 是一种在 JavaScript 中以同步方式书写异步代码的语法糖。它基于 Promise,使异步操作看起来更像顺序执行,简化了回调地狱,提高了代码可读性和维护性。
|
4月前
|
消息中间件 API 调度
TAG:BladeLLM 的纯异步推理架构
近期,大模型推理社区(vLLM,SGLang 等)普遍开始关注框架运行时开销,提出了多步调度、异步输出处理、独立 API Server 进程等工作,来分摊或掩盖部分开销。 在我们的实际业务场景中,也观察到高额的框架开销严重限制了系统吞吐,特别是在高并发(>1k)场景下,运行时开销已经接近或高于 GPU 运行时间,导致资源严重浪费和性能下降。为此,BladeLLM 设计并实现了基于 Python 的纯异步 LLM 推理架构 -- TAG (Totally Asynchronous Generator) ,以最大程度提高 GPU 利用率,提升引擎性能。
yolov8在进行目标追踪时,model.track()中persist参数的含义
yolov8在进行目标追踪时,model.track()中persist参数的含义
|
8月前
v-model绑定vuex的state怎么实现?
v-model绑定vuex的state怎么实现?
|
8月前
|
机器学习/深度学习 PyTorch 算法框架/工具
通过实例学习Pytorch加载权重.load_state_dict()与保存权重.save()
通过实例学习Pytorch加载权重.load_state_dict()与保存权重.save()
101 0
|
8月前
|
JavaScript 数据安全/隐私保护
v-model和.sync的区别
v-model和.sync的区别
186 0
|
JavaScript 前端开发
批量异步更新策略及 nextTick 原理?
批量异步更新策略及 nextTick 原理?
117 0
|
前端开发
前端学习案例2-this.setstate是同步和异步2 原
前端学习案例2-this.setstate是同步和异步2 原
67 0
前端学习案例2-this.setstate是同步和异步2 原