v-model双向绑定的实现原理

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦，这里我们先用input属性写入输入框，代码如下：

<template><view class="out"><input type="text" :value="iptvalue" @focus="isActive = true" @blur="isActive = false"@input = "onInput"><image src="../../static/chicken.gif" class="pic":class = "isActive?'active':''"></image></view>
</template><script setup>
import {ref} from "vue" ;
const iptvalue = ref("") ;
const isActive = ref(false) ;
function onInput(e){console.log(e) ;
}
</script><style lang="scss" scoped>.out{padding: 0 20px;margin-top: 40px;position: relative;input{border: 1px solid #ccc;height: 40px;position: relative;z-index: 2;background: #fff;}.pic{width: 24px;height: 24px;z-index: 1;position: absolute;top: 0px;left: calc(50% - 12px);transition: top 0.3s;}.pic.active{  top: -24px;}} </style>

在输入框中输入内容，注意去看，我们每输入一次控制台就会获取数据，更新一次：

拿到这些回传的数据，我们可以让它在另一区域实时预览，代码如下：

<template><view class="out"><input type="text" :value="iptvalue" @focus="isActive = true" @blur="isActive = false"@input = "event => iptvalue = event.detail.value"><image src="../../static/chicken.gif" class="pic":class = "isActive?'active':''"></image></view><view>预览：{{iptvalue}}</view>
</template><script setup>
import {ref} from "vue" ;
const iptvalue = ref("") ;
const isActive = ref(false) ;
// function onInput(e){
// 	iptvalue.value = e.detail.value ;
// }
</script><style lang="scss" scoped>.out{padding: 0 20px;margin-top: 40px;position: relative;input{border: 1px solid #ccc;height: 40px;position: relative;z-index: 2;background: #fff;}.pic{width: 24px;height: 24px;z-index: 1;position: absolute;top: 0px;left: calc(50% - 12px);transition: top 0.3s;}.pic.active{  //pic active同时满足时top: -24px;}} </style>

效果如下:

v-model

接下来，通过v-model简化这段代码，用v-model替换掉value属性，就实现了我们刚刚用事件来监听的方法，代码如下：

<template><view class="out"><input type="text"  @focus="isActive = true" @blur="isActive = false"v-model="iptvalue"><image src="../../static/chicken.gif" class="pic":class = "isActive?'active':''"></image></view><view>预览：{{iptvalue}}</view>
</template><script setup>
import {ref} from "vue" ;
const iptvalue = ref("") ;
const isActive = ref(false) ;
// function onInput(e){
// 	iptvalue.value = e.detail.value ;
// }
</script><style lang="scss" scoped>.out{padding: 0 20px;margin-top: 40px;position: relative;input{border: 1px solid #ccc;height: 40px;position: relative;z-index: 2;background: #fff;}.pic{width: 24px;height: 24px;z-index: 1;position: absolute;top: 0px;left: calc(50% - 12px);transition: top 0.3s;}.pic.active{  //pic active同时满足时top: -24px;}} </style>

confirm事件

input的confirm事件会在输入完内容，敲击回车键后触发，会获取输入框的数据，加上confirm事件，代码如下：

<template><view class="out"><input type="text"  @focus="isActive = true" @blur="isActive = false"v-model="iptvalue"@confirm = "onConfirm"><image src="../../static/chicken.gif" class="pic":class = "isActive?'active':''"></image></view><view>预览：{{iptvalue}}</view>
</template><script setup>
import {ref} from "vue" ;
const iptvalue = ref("") ;
const isActive = ref(false) ;
// function onInput(e){
// 	iptvalue.value = e.detail.value ;
// }function onConfirm(e){console.log(e) ;}
</script><style lang="scss" scoped>.out{padding: 0 20px;margin-top: 40px;position: relative;input{border: 1px solid #ccc;height: 40px;position: relative;z-index: 2;background: #fff;}.pic{width: 24px;height: 24px;z-index: 1;position: absolute;top: 0px;left: calc(50% - 12px);transition: top 0.3s;}.pic.active{  //pic active同时满足时top: -24px;}} </style>

输入内容，敲击回车键后，会获取到数据：