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