vue3表单输入绑定

在 Vue 3 中，表单输入绑定可以通过 v-model 指令来实现。v-model 提供了双向数据绑定，使得表单元素的值可以自动同步到组件的数据属性中，反之亦然。以下是一些关于 Vue 3 表单输入绑定的关键点：

基本使用

1. 文本输入框：

   <template>
     <input v-model="message" placeholder="Enter your message" />
     <p>Message is: {{ message }}</p>
   </template>
   
   <script>
   import { ref } from 'vue';
   
   export default {
     setup() {
       const message = ref('');
       return { message };
     }
   }
   </script>
   

2. 多行文本输入：

   <template>
     <textarea v-model="bio"></textarea>
     <p>Bio: {{ bio }}</p>
   </template>
   
   <script>
   import { ref } from 'vue';
   
   export default {
     setup() {
       const bio = ref('');
       return { bio };
     }
   }
   </script>
   

3. 单选按钮：

   <template>
     <div>
       <input type="radio" id="yes" value="Yes" v-model="choice" />
       <label for="yes">Yes</label>
       <input type="radio" id="no" value="No" v-model="choice" />
       <label for="no">No</label>
     </div>
     <p>Chosen: {{ choice }}</p>
   </template>
   
   <script>
   import { ref } from 'vue';
   
   export default {
     setup() {
       const choice = ref('');
       return { choice };
     }
   }
   </script>
   

4. 复选框：

   <template>
     <div>
       <input type="checkbox" id="subscribe" v-model="subscribe" />
       <label for="subscribe">Subscribe</label>
     </div>
     <p>Subscribe: {{ subscribe }}</p>
   </template>
   
   <script>
   import { ref } from 'vue';
   
   export default {
     setup() {
       const subscribe = ref(false);
       return { subscribe };
     }
   }
   </script>
   

5. 选择框：

   <template>
     <select v-model="selected">
       <option disabled value="">Please select one</option>
       <option>Option 1</option>
       <option>Option 2</option>
       <option>Option 3</option>
     </select>
     <p>Selected: {{ selected }}</p>
   </template>
   
   <script>
   import { ref } from 'vue';
   
   export default {
     setup() {
       const selected = ref('');
       return { selected };
     }
   }
   </script>
   

修饰符

1. .lazy：
   默认情况下，v-model 会在 input 事件后同步输入框的值。使用 .lazy 修饰符，可以改为在 change 事件后同步。

   <template>
     <input v-model.lazy="message" />
   </template>
   

2. .number：
   如果想自动将用户输入值转换为数值类型，可以使用 .number 修饰符。

   <template>
     <input v-model.number="age" type="number" />
   </template>
   
   <script>
   import { ref } from 'vue';
   
   export default {
     setup() {
       const age = ref(0);
       return { age };
     }
   }
   </script>
   

3. .trim：
   自动过滤用户输入的首尾空白字符。

   <template>
     <input v-model.trim="username" />
   </template>
   

组合式 API 与响应式数据

在 Vue 3 的组合式 API 中，通常使用 ref 或 reactive 来管理响应式数据。ref 适用于简单数据类型（如字符串、数字、布尔值），而 reactive 适用于复杂数据结构（如对象、数组）。

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.name" placeholder="Your name" />
    <input v-model="formData.email" type="email" placeholder="Your email" />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const formData = reactive({
      name: '',
      email: ''
    });

    function handleSubmit() {
      console.log(formData); // 打印表单数据
    }

    return {
      formData,
      handleSubmit
    };
  }
}
</script>

通过这些方法，你可以在 Vue 3 中有效地处理表单输入绑定，实现与用户的交互和数据同步。