layui-vue实现考试题目添加表单录入效果代码
代码语言:html
所属分类:表单美化
代码描述:layui-vue实现考试题目添加表单录入效果代码,可增加单选题题目选项和选择正确答案,采用vue3编写,无需打包,直接可在浏览器中运行。
代码标签: layui-vue 考试 题目 添加 表单 录入
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 layui-vue 样式 --> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/layui-vue.css"> <!-- 引入 Vue 3, 使用全局变量 Vue --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.3.2.33.js"></script> <!-- 引入 layui-vue 组件库, 使用全局变量 LayuiVue --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui-vue.js"></script> </head> <body> <div id="app"> <lay-form :model="model" style="margin:10px;"> <lay-form-item label="题目" prop="topicname"> <lay-input v-model="model.topicname"></lay-input> </lay-form-item> <lay-form-item label="选项" prop="topicoption"> <lay-button type="primary" @click="add"> <lay-icon type="layui-icon-add-circle"></lay-icon> </lay-button> <template v-for="(option, index) in model.topicoption" :key="option" > <div style="display:flex;margin-top:10px;"> <label style="margin:10px;">{{biaoarr[index]}}、</label> <lay-input v-model="option.name" placeholder="选项" style="width:300px;"></lay-input> <lay-button type="primary" @click="del(index)"> <lay-icon type="layui-icon-delete"></lay-icon> </lay-button> </div> </template> </lay-form-item> <lay-form-item label="正确答案" prop="rightans"> <lay-select v-model="model.rightans" style="width:100px;"> <lay-select-option v-for="(option, index) in model.topicoption" :value="index" :label="biaoarr[index]"></lay-select-option> </lay-select> </lay-form-item> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0