在前端处理表单时，我们常常需要将表单输入框的内容同步给 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>
输入内容，敲击回车键后，会获取到数据：
