Vue3输入框（Input）

**Vue3 输入框（Input）**

在 Vue3 中，`` 组件是用于获取用户输入的基本组件。它可以用来创建文本输入框、密码输入框、选择列表等各种类型的输入控件。

### 基础使用首先，我们需要了解如何使用 `` 组件。在 Vue3 中，可以直接在模板中使用 `` 组件，如下所示：

html<template>
 <div>
 <input v-model="username" type="text" placeholder="请输入用户名">
 <button @click="handleClick">点击</button>
 </div>
</template>

<script>
export default {
 data() {
 return {
 username: ''
 }
 },
 methods: {
 handleClick() {
 console.log(this.username)
 }
 }
}
</script>

在上述示例中，我们使用 `v-model` 指令将输入框的值绑定到了组件的 `username` 数据属性上。点击按钮时，会输出当前输入框中的值。

### 属性和事件Vue3 中的 `` 组件支持多种属性和事件，可以用来自定义其行为和外观。

#### 属性：

* `type`: 指定输入类型，如 `text`、`password`、`email` 等。
* `placeholder`: 设置输入框的占位符文本。
* `disabled`: 是否禁用输入框。
* `readonly`: 是否只读输入框。

html<template>
 <div>
 <input v-model="username" type="text" placeholder="请输入用户名">
 <button @click="handleClick">点击</button>
 </div>
</template>

<script>
export default {
 data() {
 return {
 username: ''
 }
 },
 methods: {
 handleClick() {
 console.log(this.username)
 }
 }
}
</script>

####事件：

* `input`: 当输入值改变时触发。
* `change`: 当输入值改变且失去焦点时触发。
* `focus`: 当输入框获得焦点时触发。
* `blur`: 当输入框失去焦点时触发。

html<template>
 <div>
 <input v-model="username" type="text" placeholder="请输入用户名">
 <button @click="handleClick">点击</button>
 </div>
</template>

<script>
export default {
 data() {
 return {
 username: ''
 }
 },
 methods: {
 handleClick() {
 console.log(this.username)
 }
 }
}
</script>

### 组合使用Vue3 中的 `` 组件可以与其他组件结合使用，来创建复杂的输入控件。

#### 文本和密码输入框

html<template>
 <div>
 <label>用户名:</label>
 <input v-model="username" type="text" placeholder="请输入用户名">
 

 <label>密码:</label>
 <input v-model="password" type="password" placeholder="请输入密码">
 </div>
</template>

<script>
export default {
 data() {
 return {
 username: '',
 password: ''
 }
 }
}
</script>

#### 下拉列表

html<template>
 <div>
 <label>选择:</label>
 <select v-model="selected">
 <option value="">请选择</option>
 <option value="选项1">选项1</option>
 <option value="选项2">选项2</option>
 </select>
 </div>
</template>

<script>
export default {
 data() {
 return {
 selected: ''
 }
 }
}
</script>

#### 日期选择器

html<template>
 <div>
 <label>日期:</label>
 <input v-model="date" type="date">
 </div>
</template>

<script>
export default {
 data() {
 return {
 date: ''
 }
 }
}
</script>

### 总结Vue3 中的 `` 组件是用于获取用户输入的基本组件，可以用来创建各种类型的输入控件。通过使用 `v-model` 指令、属性和事件，可以自定义其行为和外观。组合使用 `` 组件可以创建复杂的输入控件，如文本和密码输入框、下拉列表等。