v-mode双向绑定

@input：当输入值的时候时，触发input事件，event.detail = {value}

@input="onInput",函数自带有一个返回值，我们输出这个返回值时，输入框的值改变时，event.detail = {value}的value也会改变

<template>
	<view class="box">
		<input type="text" v-bind:value="iptValue" @input="onInput" />
		<view>输入框内容：{{iptValue}}</view>
	</view>
</template>

<script setup>
	
import { ref } from 'vue';
const iptValue=ref("");//input输入框的value值

// 输入框改变时触发
function onInput(e){
	console.log(e);/* 在浏览器控制台输出@input的返回值 */
}
</script>

<style lang="scss" scoped>
.box{
	input{
		border: 1px solid hotpink;//设置输入框的边框大小和颜色
	}
}
</style>

 如果要使页面上显示的和input输入的一致我们可以让value的变量等于input改变的值：

// 输入框改变时触发
function onInput(e){
	console.log(e);/* 在浏览器控制台输出@input的返回值 */
	iptValue.value=e.detail.value;//input的value变量值等于input改变时的值
}

 当然我们也可以简化，直接在@input里面进行赋值，用even返回值箭头函数value的变量等于@input

返回值的detail.value,event就是在函数上返回参数e。

<template>
	<view class="box">
		<input type="text" v-bind:value="iptValue" @input="event=>iptValue=event.detail.value" />
		<view>输入框内容：{{iptValue}}</view>
	</view>
</template>

<script setup>
	
import { ref } from 'vue';
const iptValue=ref("");//input输入框的value值

// 输入框改变时触发
// function onInput(e){
// 	console.log(e);/* 在浏览器控制台输出@input的返回值 */
// 	iptValue.value=e.detail.value;//input的value变量值等于input改变时的值
// }
</script>

<style lang="scss" scoped>
.box{
	input{
		border: 1px solid hotpink;//设置输入框的边框大小和颜色
	}
}
</style>

我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量，手动连接值绑定和更改事件监听器可能会很麻烦

v-model 指令帮我们简化了这一步骤，直接吧：v-bind:value替换成v-model,然后把@input删除

代码示例：

<template>
	<view class="box">
		<input type="text"  v-model="iptValue" />
		<view>输入框内容：{{iptValue}}</view>
	</view>
</template>

<script setup>
	
import { ref } from 'vue';
const iptValue=ref("");//input输入框的value值
// 输入框改变时触发
// function onInput(e){
// 	console.log(e);/* 在浏览器控制台输出@input的返回值 */
// 	iptValue.value=e.detail.value;//input的value变量值等于input改变时的值
// }
</script>

<style lang="scss" scoped>
.box{
	input{
		border: 1px solid hotpink;//设置输入框的边框大小和颜色
	}
}
</style>

 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合

@confirm：点击完成按钮时触发，我们在输入框里输入内容是不会触发的，当我们输入内容点击回车按钮时才会触发。