下拉选择框

简介: 下拉选择框

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

最后呈现效果如下:

四.结语

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


目录
相关文章
|
监控 druid Java
监控druid数据库连接池连接泄露的思路
监控druid数据库连接池连接泄露的思路
1592 2
|
编译器 C语言
QT编译fabs not declared in this scope
QT编译fabs not declared in this scope
272 0
|
并行计算 Linux Go
export GOMP_CPU_AFFINITY=0-(((npro
export GOMP_CPU_AFFINITY=0-(((nproc --all) - 1 )) 是一条 Linux 命令,用于设置 GOMP(Go 语言的 OpenMP 支持库)使用的 CPU 亲和性。
543 1
|
JSON NoSQL MongoDB
理解Nosql数据库的mongodb
【5月更文挑战第5天】MongoDB是2009年发布的一款通用型NoSQL数据库,结合了关系模型和NoSQL的优点,适用于各种现代应用。其特点包括图形界面、数据服务、云基础设施集成(AWS, Azure, Google Cloud)。它具备全面的查询能力、ACID事务、可调整的一致性保证,并有多语言驱动及工具,可在任何地方运行。
355 4
|
10月前
|
存储 安全 Java
ConcurrentLinkedQueue详解
通过本文的介绍,希望您能够深入理解 `ConcurrentLinkedQueue`的工作原理、主要特性、常用方法以及实际应用,并在实际开发中灵活运用这些知识,编写出高效、健壮的并发程序。
249 3
|
11月前
|
Kubernetes 调度 容器
使用Kmesh作为阿里云服务网格ASM Sidecarless模式数据面
阿里云服务网格ASM支持Sidecar和Sidecarless两种模式,其中Sidecarless模式如Istio Ambient、ACMG和Kmesh等,可减少延迟和资源消耗。Kmesh基于eBPF技术,通过内核空间拦截流量,结合Waypoint Proxy处理L7流量,实现高效的服务治理。本文介绍了如何在阿里云ACK集群中部署Kmesh并连接ASM控制面,包括安装步骤、检查服务状态和流量调度示例。
260 0
|
Arthas 运维 监控
排忧解难:线上问题排查工具箱
线上系统在各行各业中扮演关键角色,任何问题都可能对企业运营造成严重影响。排查复杂性增加,需要专门的线上问题排查工具箱。工具箱包含监控、日志分析、性能分析和故障排查工具,如系统监控的`top`、`htop`,应用监控的`New Relic`、`AppDynamics`,日志分析的`ELK Stack`、`Graylog`,以及故障排查的`jps`、`jstack`、`Arthas`等。这些工具能提升问题解决效率,降低排查成本,确保业务连续性。
353 2
|
JavaScript API
vue数据更新但不改变视图,解决办法?
开发过程中会碰到数据更新,但是视图并未改变的情况,情况如下
924 0
|
安全 Java Shell
网络安全-webshell详解(原理、检测与防御)
网络安全-webshell详解(原理、检测与防御)
1576 1
好家伙!30% 国外程序员每天“摸鱼”四五个小时,国内似乎更严重
2020 年全球爆发新冠疫情后,很多国家和地区的企业支出远程办公,除了一些必须在现场办公的岗位之外,很多岗位的员工都可以居家办公。