满口金牙 2022-07-22 13:46 采纳率: 91.5%
浏览 860
已结题

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 14: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月30日
  • 已采纳回答 7月22日
  • 修改了问题 7月22日
  • 创建了问题 7月22日

悬赏问题

  • ¥15 carsim与simulink联合方针模拟无控制器驾驶员驾驶效果
  • ¥25 annaconda jvpyter
  • ¥20 来一个会抓包app支付接口的
  • ¥30 vivado2017.4的sdk打不开
  • ¥50 matlab,文献复现
  • ¥20 寻找Flink CDC指导,有偿咨询
  • ¥15 cruise如何仿真不同温度下车辆的经济性?
  • ¥20 扑克牌游戏的完整代码
  • ¥88 求帮安装Python架构的vnpy
  • ¥20 逻辑回归法分析品牌知名度和购买意向