vue vjsf通过json配置生成表单示例代码-html代码-BFW代码库

vue vjsf通过json配置生成表单示例代码

代码语言：html

代码描述：vjsf通过vuetify结合materialdesignicons，使用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>
    <v-app id="app">
        <v-container>
            <p>valid={{valid}}</p>
            <v-form ref="form" v-model="valid">
                <v-jsf v-model="model" :schema="schema" :options="options">
                    <template slot="rating" slot-scope="{ value, on }" class="field">
  <star-rating :value="value" @rating-selected="on.input" :show-rating="false" />
</template>
                    <template slot="stringProp1-prepend">
    this is a Vuetify code slot
  </template>
                    <template slot="custom-string1" slot-scope="{value, label, on}"><p class="mt-4">
    {{label}} <input type="text" :value="value" v-on="on" style="border:1px solid green;">.</p>
  </template>
                </v-jsf>
            </v-form>
            <v-layout row class="mt-2">
                <v-spacer></v-spacer>
                <v-btn color="primary" @click="displayData">Show Data</v-btn>
            </v-layout>
        </v-container>
    </v-app>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwre.........完整代码请登录后点击上方下载按钮下载查看