Input 输入框：
<template>
<van-field v-model="inputValue" label="输入框" placeholder="请输入内容" />
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
}
};
</script>
Radio 单选框：
<template>
<van-radio-group v-model="radioValue">
<van-radio name="apple">苹果</van-radio>
<van-radio name="banana">香蕉</van-radio>
<van-radio name="orange">橙子</van-radio>
</van-radio-group>
</template>
<script>
export default {
data() {
return {
radioValue: 'apple'
};
}
};
</script>
Checkbox 复选框：
<template>
<van-checkbox-group v-model="checkboxValues">
<van-checkbox name="apple">苹果</van-checkbox>
<van-checkbox name="banana">香蕉</van-checkbox>
<van-checkbox name="orange">橙子</van-checkbox>
</van-checkbox-group>
</template>
<script>
export default {
data() {
return {
checkboxValues: []
};
}
};
</script>
Switch 开关：
<template>
<van-switch v-model="switchValue" />
</template>
<script>
export default {
data() {
return {
switchValue: true
};
}
};
</script>
Slider 滑块：
<template>
<van-slider v-model="sliderValue" />
</template>
<script>
export default {
data() {
return {
sliderValue: 50
};
}
};
</script>
Picker 选择器：
<template>
<van-picker
v-model="pickerValue"
:columns="pickerColumns"
title="选择器"
@change="handlePickerChange"
/>
</template>
<script>
export default {
data() {
return {
pickerValue: '',
pickerColumns: ['苹果', '香蕉', '橙子']
};
},
methods: {
handlePickerChange(value) {
console.log('选中的值:', value);
}
}
};
</script>
以上是一些 Vant3 表单组件的基本用法。查阅 Vant3 的官方文档能够获取更详细的信息、配置选项和示例代码：[Vant3 表单组件文档](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/form)。
转载请注明出处：http://www.zyzy.cn/article/detail/5716/Vant