下拉选择框

简介: 下拉选择框

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装在一起,便于后面样式设置,以防代码混乱不方便自己查找。

最后呈现效果如下:

四.结语

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


目录
相关文章
|
4月前
点击div显示下拉框,然后下拉框中的点击事件不生效。
点击div显示下拉框,然后下拉框中的点击事件不生效。
|
6月前
|
前端开发
uniapp checkbox样式失效,选中框选中按钮不显示
uniapp checkbox样式失效,选中框选中按钮不显示
85 0
|
11月前
|
前端开发 C# 数据安全/隐私保护
ApeForms | C# - WinForm临时对话框(消息框、提示框、输入框、密码框、单选框、多选框等)
ApeForms一款基于WinForm实现的开源免费商用的UI库,其中提供了一套便于用户交互的临时对话框组件(Dialog),可用于快速创建开发中常见的交互对话框,例如:消息框、提示框、输入框、单选框、多选框等。 ApeFree.ApeDialogs并不是一个包含Dialog实现的UI库,而是一套Dialog标准(提供了一套临时弹出对话框的实现标准)。 Dialog是界面开发过程中必不可少的组件,无论是桌面开发、Web前端开发、移动端开发,甚至命令行应用程序中的一次“Yes or No”的输入都可以看做是一次Dialog弹框。
383 0
ApeForms | C# - WinForm临时对话框(消息框、提示框、输入框、密码框、单选框、多选框等)
|
12月前
|
XML Java API
按钮和复选框控件
按钮和复选框控件
53 0
Vant3——复选框点击其他后格外出现一个输入框
复选框点击其他后格外出现一个输入框
155 0
|
Web App开发 JavaScript 前端开发
对话框、模态框和弹出框看起来很相似,它们有何不同?
由于一个新的 popover 属性正在被提出,所以这篇文章将探讨对话框(dialogs)、弹出窗口(popovers)、叠加层(overlays)和揭示小部件(disclosure widgets)之间的区别。
26284 1
|
JavaScript 前端开发
单选与全选
结合table表格和checkbox复选框实现单选与全选功能(本文只考虑功能实现,样式不要在意,虽然极丑,但我看不到 φ(>ω<*) )。
单选与全选
|
Web App开发 JavaScript