quasar+vue表单单选多选效果代码-html代码-BFW代码库

quasar+vue表单单选多选效果代码

代码语言：html

代码描述：quasar+vue表单单选多选效果代码

下面为部分代码预览，完整代码请点击下载或在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|Material+Icons'>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/quasar.prod.css">

</head>

<body>
<!--
  Forked from:
  http://www.quasarchs.com/vue-components/option-group#example--native-form
-->
<div id="q-app" style="min-height: 100vh;">
  <div class="q-pa-md">
    <q-form @submit="onSubmit" class="q-gutter-md">
      <div class="bg-grey-2 q-pa-sm rounded-borders">
        Preferred genre:
        <q-option-group
          name="preferred_genre"
          v-model="preferred"
          :options="options"
          color="primary"
          inline
        ></q-option-group>
      </div>

      <div class="bg-grey-2 q-pa-sm rounded-borders">
        Accepted genres:
        <q-option-group
          name="accepted_genres"
          v-model="accepted"
          :options="options"
          type="checkbox"
          color="primary"
          inline
        ></q-option-group>
      </div>
<div class="q-pa-lg">
    <q-option-group
      v-model="group"
      :options="options"
      color="yellow"
      type="toggle"
    ></q-option-group>
      <div>
        <q-btn label="Submit" type="submit" color="primary"></q-btn>
      </div>
    </q-form>

    <q-card v-if="submitResult.length > 0" flat bordere.........完整代码请登录后点击上方下载按钮下载查看