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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0