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>

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