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

Question

<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 值
请教如何实现

Answer 1

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>