在Vue.js中，为输入框赋予默认值主要通过v-model指令实现，首先在组件的data选项中定义响应式数据属性，如inputValue: '默认内容'，然后在模板中使用`或`绑定该属性，data中定义的初始值即为输入框的默认显示内容，若需动态设置默认值，可在created或mounted生命周期钩子中修改data属性值，Vue会自动更新视图，确保数据属性在data中声明，以保证响应式特性。
Vue.js 中为输入框设置默认值的完整指南
在 Vue.js 开发实践中，为输入框设置默认值是一项基础且高频的需求，无论是用户信息编辑时的预填充、表单初始化时的默认选项选择，还是配置表单的默认状态，掌握多种设置方法都至关重要，本文将系统性地介绍 Vue.js 中为输入框设置默认值的多种实现方式，涵盖基础场景、不同输入框类型的处理技巧、动态数据来源的绑定策略以及常见问题的解决方案，旨在帮助开发者灵活应对各种实际开发挑战。
基础方法：使用 `v-model` 和响应式数据源
Vue.js 的核心优势在于数据驱动视图，为输入框设置默认值的本质，是将组件的响应式数据与输入框的值进行双向绑定，最基础且推荐的方式是利用 `v-model` 指令关联在 `data`（Vue 2）或 `ref`/`reactive`（Vue 3）中定义的响应式属性，并在其中设置初始值。
Vue 2 Options API 示例
<template>
<div>
<input
type="text"
v-model="username"
placeholder="请输入用户名"
>
</div>
</template>
<script>
export default {
data() {
return {
username: "默认用户名" // 在 data 中设置初始默认值
}
}
}
</script>
说明：
v-model="username"建立了输入框与组件内部data.username属性之间的双向数据绑定。- 组件初始化时,
data.username的值"默认用户名"会自动渲染到输入框中。 - 当用户在输入框中修改内容时,
data.username会实时同步更新，体现了 Vue 的响应式特性。
Vue 3 Composition API 示例
Vue 3 推荐使用 Composition API，通过 `setup` 函数结合 `ref` 或 `reactive` 来管理响应式状态，默认值的设置逻辑与 Options API 一致，只是声明方式不同：
<template>
<div>
<input
type="text"
v-model="username"
placeholder="请输入用户名"
>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
// 使用 ref 创建响应式引用，并设置初始默认值
const username = ref("默认用户名")
// 将响应式数据暴露给模板
return { username }
}
}
</script>
说明：
ref()用于创建一个包装了原始值的响应式引用对象，在模板中访问时，Vue 会自动解包ref对象，直接使用username即可。- 初始值
"默认用户名"在组件挂载后会显示在输入框中。 - 用户输入变化时,
username.value会自动更新（虽然模板中无需显式写.value）。
不同输入框类型的默认值设置
实际开发中,输入框类型多样（文本、文本域、复选框、单选框、下拉框等），它们的默认值设置机制存在差异，需根据具体类型选择合适的方法，核心原则仍是利用 `v-model` 绑定对应的响应式数据，并在数据源中设置初始值。
文本域（textarea）
文本域（`