众所周知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 = '' } })