@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:点击完成按钮时触发,我们在输入框里输入内容是不会触发的,当我们输入内容点击回车按钮时才会触发。