单行文本输入框：
<template>
<van-field v-model="inputValue" label="单行文本" placeholder="请输入内容" />
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
}
};
</script>
在上述代码中，通过 v-model 双向绑定的方式，你可以获取用户在输入框中输入的文本。
多行文本输入框：
<template>
<van-field
v-model="textareaValue"
label="多行文本"
type="textarea"
placeholder="请输入内容"
rows="3"
/>
</template>
<script>
export default {
data() {
return {
textareaValue: ''
};
}
};
</script>
通过设置 type 属性为 "textarea"，你可以创建一个多行文本输入框。
数字输入框：
<template>
<van-field v-model="numberValue" label="数字" type="number" placeholder="请输入数字" />
</template>
<script>
export default {
data() {
return {
numberValue: null
};
}
};
</script>
通过设置 type 属性为 "number"，你可以创建一个只能输入数字的输入框。
密码输入框：
<template>
<van-field v-model="passwordValue" label="密码" type="password" placeholder="请输入密码" />
</template>
<script>
export default {
data() {
return {
passwordValue: ''
};
}
};
</script>
通过设置 type 属性为 "password"，你可以创建一个用于输入密码的输入框，输入内容会被隐藏。
禁用状态：
<template>
<van-field v-model="inputValue" label="禁用状态" placeholder="请输入内容" :disabled="true" />
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
}
};
</script>
通过设置 disabled 属性，你可以使输入框进入禁用状态，用户无法进行交互。
以上是一些 Vant3 Field 输入框组件的基本用法。查阅 Vant3 的官方文档能够获取更详细的信息、配置选项和示例代码：[Vant3 Field 输入框文档](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/field)。
转载请注明出处：http://www.zyzy.cn/article/detail/5721/Vant