满口金牙 2022-07-22 05:46 采纳率: 91.1%
浏览 977
已结题

input v-moel 绑定值与显示值不同 如何实现

<input  type="text" v-model.lazy=i.value />

i ={ value:'', proto:'' }
value 是展示到网页上的值
proto 是实际输入的值

比如说, 实际输入 1.2356
现在设置精确到1位
i = { value:1.2, proto:1.2356}
更改设置到2位
i = { value:1.23, proto:1.2356}

首先输入完成后要把value 记录到 proto

按理说 这个 v-model 要绑到 proto上
然后 显示 的又是处理后的 value 值

请教如何实现

  • 写回答

6条回答 默认 最新

  • CSDN专家-showbo 2022-07-22 06:26
    关注

    v-model.lazy实际为onchange事件和v-bind结合。如果要实现格式化,失去焦点显示格式化值,获取焦点显示原始值,可以用v-bind绑定显示值,onblur事件获取输入值设置proto后,同时格式化输入值赋值给value。onfocus事件显示原始值

    简单示例如下

    
    <script src="https://unpkg.com/vue@next" data-ver="3"></script>
    <div id="app">
        输入值:<input type="text" :value="i.value" @blur="setText" @focus="setText(i.proto)" /><br />
        小数位:<input type="text" v-model="decimalNum" />
    </div>
    <script>
        var app = {
            data() {
                return {
                    i: { value: '', proto: '' },
                    decimalNum:2//显示的小数位
                }
            },
            methods: {
                setText(e) {
                    if (e.target) {//change事件
                        if (e.target.value && !isNaN(e.target.value)) {
                            this.i.proto = parseFloat(e.target.value) || 0;
    
                            var v = Math.pow(10, this.decimalNum)
                            this.i.value = Math.floor(this.i.proto * v) / v;
                        }
                    } else this.i.value = this.i.proto.toString();//focus事件
                }
            }
        };
        Vue.createApp(app).mount('#app')
    </script>
    

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(5条)
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 7月29日
  • 已采纳回答 7月22日
  • 修改了问题 7月22日
  • 创建了问题 7月22日

悬赏问题

  • ¥15 ensp可以看看嘛.
  • ¥80 51单片机C语言代码解决单片机为AT89C52是清翔单片机
  • ¥60 优博讯DT50高通安卓11系统刷完机自动进去fastboot模式
  • ¥15 minist数字识别
  • ¥15 在安装gym库的pygame时遇到问题,不知道如何解决
  • ¥20 uniapp中的webview 使用的是本地的vue页面,在模拟器上显示无法打开
  • ¥15 网上下载的3DMAX模型,不显示贴图怎么办
  • ¥15 关于#stm32#的问题:寻找一块开发版,作为智能化割草机的控制模块和树莓派主板相连,要求:最低可控制 3 个电机(两个驱动电机,1 个割草电机),其次可以与树莓派主板相连电机照片如下:
  • ¥15 Mac(标签-IDE|关键词-File) idea
  • ¥15 潜在扩散模型的Unet特征提取
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部