基本フォームにさわる
input, radio, select, checkboxあたりの部品に触ってみる
Element Plus - The world's most popular Vue 3 UI framework
<template lang="pug"> el-form el-form-item(label="Text") el-input( placeholder="Email Address" name="email" v-model="formModel.email" clearable ) el-input( placeholder="Url" name="url" v-model="formModel.url" ) template(#prepend) Http:// el-input( placeholder="Password" name="password" v-model="formModel.password" show-password ) el-input( placeholder="Input freeword" name="freeword" v-model="formModel.freeword" ) template(#prepend) el-select( v-model="formModel.select" placeholder="Select" style="width: 120px;" ) el-option(label="Address" value="1") el-option(label="Name" value="2") el-option(label="E-Mail" value="3") el-form-item(label="Select") el-select( name="choice" v-model="formModel.choice" ) el-option(label="OK" value="ok") el-option(label="NG" value="ng") el-form-item(label="Switch") el-switch( name="switch" v-model="formModel.switch" ) el-form-item(label="CheckBox") el-checkbox(label="A" v-model="formModel.checks.a") el-checkbox(label="B" v-model="formModel.checks.b") el-checkbox(label="C" v-model="formModel.checks.c") el-form-item(label="Radio") el-radio(label="a" v-model="formModel.radio") el-radio(label="b" v-model="formModel.radio") el-form-item(label="DatePicker") el-date-picker( type="date" v-model="formModel.dt" ) </template> <script lang="ts"> import { defineComponent, reactive } from "vue"; export default defineComponent({ name: "FormUiPage", setup() { const formModel = reactive({ email: "a@b.c", password: "abcdefg123", url: "www.google.com/", age: 20, freeword: "", select: "", choice: "", switch: true, checks: { a: true, b: false, c: false, }, radio: "b", dt:"", }); return { formModel, }; }, }); </script>