layui-vue根据json自动生成带验证的form表单效果代码-html代码-BFW代码库

layui-vue根据json自动生成带验证的form表单效果代码

代码语言：html

代码描述：layui-vue根据json自动生成带验证的form表单效果代码，根据json配置自动生成表单。

下面为部分代码预览，完整代码请点击下载或在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" style="padding:20px;">
        <lay-form :model="formModel" ref="layFormRef" >
            
            
    <lay-form-item v-for="(item, index) in formjson" :key="item" :label="item.showname" :prop="item.itemname"  :required="item.required">
      <lay-input v-if="item.type=='input'" v-model="formModel[item.itemname]" ></lay-input>
      
       <lay-textarea :placeholder="item.showname"  v-if="item.type=='textarea'" v-model="formModel[item.itemname]" ></lay-textarea>
    </lay-form-item>
   
    <lay-form-item>
      <lay-button @click="validate">提交</lay-button>
      <lay-button @click="clearValidate">清除校验</lay-button>
      <lay-button @click="reset">重置表单</lay-button>
    </lay-form-item>
  </lay-form>
    </.........完整代码请登录后点击上方下载按钮下载查看