vue vjsf通过json配置生成填写简历表单结果输出json效果代码

代码语言:html

所属分类:表单美化

代码描述:使用vue的vjsf来通过编写json配置数据来生成填写简历的表单,支持工作经历和教育经历增删改并将表单提交结果输出json效果代码

代码标签: vue vjsf 简历 表单 json

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

   
<meta charset="UTF-8">




   
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'>
   
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/materialdesignicons.4.0.css">
   
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vuetify.min.css">
   
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vjsf.main.css">



</head>

<body translate="no">
   
<v-app id="app">
       
<v-container>
            {{model}}
           
<p>valid={{valid}}</p>
           
<v-form ref="form" v-model="valid">
               
<v-jsf v-model="model" :schema="schema" :options="options" />
           
</v-form>
           
<v-layout row class="mt-2">
               
<v-spacer></v-spacer>
               
<v-btn color="primary" @click="$refs.form.validate()">Validate</v-btn>
           
</v-layout>
       
</v-container>
   
</v-app>

   
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>


   
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vuetify.js"></script>
   
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vjsf.main.js"></script>
   
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vjsf.third-party.js"></script>

   
<script>
     

   
            const model = {};
           
            .........完整代码请登录后点击上方下载按钮下载查看

网友评论0