vue输入框reactive双向绑定

在Vue中，使用reactive函数可以创建一个响应式对象，实现数据的双向绑定。具体步骤如下：

1. 首先，导入`reactive`函数，并声明一个对象用于存储数据结果。例如：

   import { reactive } from "vue";
   const user = reactive({ phone: '', code: '' });

2. 在模板中定义输入框，并使用`:value`绑定数据，同时使用`data-type`属性来标识输入框对应的属性。例如：

   <van-field placeholder="请输入手机号" :value="user.phone" data-type="phone" @change='inputUser'></van-field>
   <van-field placeholder="请输入短信验证码" data-type="code" :value="user.code" @change='inputUser'></van-field>

3. 在方法中定义数据的双向绑定函数，使用`@change`监听输入框的变化，并将对应的值赋给相应的属性。例如：

   const inputUser = (e) => {
     user[e.target.dataset.type = e.detail;
   }

完整的示例代码如下：

<template>
  <view class="app">
    <van-field placeholder="请输入手机号" :value="user.phone" data-type="phone" @change='inputUser'></van-field>
    <van-field placeholder="请输入短信验证码" data-type="code" :value="user.code" @change='inputUser'></van-field>
  </view>
</template>

<script setup>
import { reactive } from "vue";
const user = reactive({ phone: '', code: '' });

const inputUser = (e) => {
  user[e.target.dataset.type = e.detail;
}
</script>

通过以上步骤，可以实现Vue输入框的reactive双向绑定。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>