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装在一起,便于后面样式设置,以防代码混乱不方便自己查找。
最后呈现效果如下:
四.结语
下拉选择框需要注意是下拉框的内容能否正确显示出来,以及样式的设置。