下拉选择框

简介: 下拉选择框

1.问题描述

当我们在填一些问卷的时候,问卷的设计基本都是通过输入框实现的,普通的输入框就是一个问题后面会出现一个填写内容的框架,有时还会出现下拉选择框,下拉选择框的实现是与普通输入框不一样的,下面将介绍下拉选择框的算法。

2.算法描述

首先,会用到el-select组件,v-model和value是绑定值,类型为string/number;placeholder是输入框占位文本意思、类型为string,placeholder里面写的文字会直接显示在文本框里面;lablel的意思是输入框关联的label文字,若不设置lablel则默认与value相同。在使用el-select中,新增一条option,如果value对应的值是string则不会影响前端的显示。

3. 实验讨论与结果

下拉选择框的代码如下:

      <el-option </el-optionlabel="下拉框1" value="1">

      <el-option </el-optionlabel="下拉框2" value="2">

      <el-option </el-optionlabel="下拉框3" value="3">

      <el-option </el-optionlabel="下拉框4" value="4">

      <el-option </el-optionlabel="下拉框5" value="5">


该部分代码仅仅是下拉选择框的代码,如果要与其他的内容一起展示时,最好用一个盒子div装在一起,便于后面样式设置,以防代码混乱不方便自己查找。

最后呈现效果如下:

四.结语

下拉选择框需要注意是下拉框的内容能否正确显示出来,以及样式的设置。


目录
相关文章
|
6月前
|
前端开发 Android开发 Windows
27. 【Android教程】下拉选择框 Spinner
27. 【Android教程】下拉选择框 Spinner
242 2
|
7月前
|
前端开发 JavaScript 开发者
< elementUi 下拉选择框组件 树状部门选择( 多选/单选 )>
在前端开发中,为解决ElementUI缺少处理树状数据选择的Select组件问题,封装了一个Vue子组件`SelectTree`。组件支持单选和多选,具备搜索功能和懒加载特性。单选示例展示了如何展示树状部门数据,而多选则增加了已选内容的取消功能。此外,还新增了根据等级限制选择的功能。文章提供了详细的代码实现和效果截图,对需要此类组件的开发者具有参考价值。
230 1
< elementUi 下拉选择框组件 树状部门选择( 多选/单选 )>
|
7月前
点击div显示下拉框,然后下拉框中的点击事件不生效。
点击div显示下拉框,然后下拉框中的点击事件不生效。
|
前端开发 C# 数据安全/隐私保护
ApeForms | C# - WinForm临时对话框(消息框、提示框、输入框、密码框、单选框、多选框等)
ApeForms一款基于WinForm实现的开源免费商用的UI库,其中提供了一套便于用户交互的临时对话框组件(Dialog),可用于快速创建开发中常见的交互对话框,例如:消息框、提示框、输入框、单选框、多选框等。 ApeFree.ApeDialogs并不是一个包含Dialog实现的UI库,而是一套Dialog标准(提供了一套临时弹出对话框的实现标准)。 Dialog是界面开发过程中必不可少的组件,无论是桌面开发、Web前端开发、移动端开发,甚至命令行应用程序中的一次“Yes or No”的输入都可以看做是一次Dialog弹框。
570 0
ApeForms | C# - WinForm临时对话框(消息框、提示框、输入框、密码框、单选框、多选框等)
|
XML Java API
按钮和复选框控件
按钮和复选框控件
95 0
Vant3——复选框点击其他后格外出现一个输入框
复选框点击其他后格外出现一个输入框
224 0
|
JavaScript
freemaker页面复选框全选与反选
freemaker页面复选框全选与反选
|
Web App开发 JavaScript