この記事では、フォーム検証を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は次のとおりです。 1. ルートジャンプまず、Vueプロジェクトのsrcディレクトリを開いてルーターファイルを設定し、importを使用してフォームページ名を公開し、ルーターインスタンスにルーティングテーブルを登録します。コードは次のとおりです。 「@/views/create/create.vue」からCreateをインポートします。 //公開される名前の最初の文字は大文字にする必要があります。以下はフォームページが配置されているディレクトリです @ は .. の略語で、前のレベルに戻ることを意味します const router = new Router ({ mode:"history"//これはルートモードです。routes:[ { パス: "/create", //デフォルトは/です。パスが複数ある場合は、/にパス名を加えたものになります: "create", コンポーネント: 作成、 タイトル: 「フォーム」、 }, ] }) ルーティング テーブルが設定されたら、ホームページの router-link タグの to オプションを設定することを忘れないでください。 <router-link :to="{ name: 'create' }" class="collection">フォーム</router-link> 次にフォームページ レンダリング 関数の実装コードは以下のとおりです。 プラグインはelement.uiを使用します。ターミナルでnpm i element-uiを使用できます。インストールが成功したら、package.jsonで確認し、main.jsで参照します。 インストールが完了したら、使用できます。 <テンプレート> <div class="create"> <h2>新しいレシピの公開を歓迎します。まずはあなたの傑作を紹介してください。 </h2> <セクション class="create-introduce"> <h5>タイトル</h5> <el-入力 v-model="backData.title" クラス="create-input" placeholder="コンテンツを入力してください" </el-input> ... <h5>属性</h5> <div> <el-選択 v-for="プロパティ内の項目" :key="アイテム.親名" :placeholder="アイテム.親名" v-model="backData.property[item.title]" > <el-オプション v-for="item.list 内のオプション" :key="オプションタイプ" :label="オプション名" :value="オプションタイプ" > </el-option> </el-select> </div> <h5>レシピのカテゴリー</h5> <div> <el-select placeholder="レシピのカテゴリーを選択してください" v-model="backData.classify"> <el-オプショングループ v-for="group in classifies" :key="グループ.親タイプ" :label="グループ.親名" > <el-オプション v-for="group.list 内の項目" :key="アイテムタイプ" :label="アイテム名" :value="アイテムタイプ" > </el-option> </el-option-group> </el-select> </div> <h5>完成品画像(328*440)</h5> <div class="アップロード-img-box クリアフィックス"> <div class="アップロード-img"> <アップロード画像 アクション="/api/upload?type=product" :img-url="backData.product_pic_url" @res-url=" (データ) => { バックデータ、(product_pic_url = data.res); } 「 </アップロード-画像> </div> <el-入力 クラス="テキストの紹介" タイプ="テキストエリア" :行数="10" placeholder="コンテンツを入力してください" > </el-input> </div> </セクション> <h2>すべての原材料を記録する</h2> <セクション class="create-introduce"> <h5>主な原材料</h5> <!--[ { "名前": "", "仕様": "" }, { "名前": "", "仕様": "" }, { "名前": "", "仕様": "" } ]--> <スタッフ v-model="backData.raw_material.main_material"></スタッフ> <h5>アクセサリー</h5> <スタッフ v-model="backData.raw_material.accessories_material"></スタッフ> </セクション> <h2>手順を書き始めましょう!習得しやすいかどうかは、書き方次第です。頑張ってください! </h2> <セクション class="create-introduce"> <アップロード v-for="(item, index) in 3" :key="index"></アップロード> <el-ボタン class="eaeaeae ステップ追加ボタン" タイプ="プライマリ" サイズ="中" アイコン="el-icon-plus" @click="追加" >ステップを1つ追加</el-button > <h5>調理のヒント</h5> <el-入力 クラス="テキストの紹介" タイプ="テキストエリア" :行数="8" placeholder="この料理を作る際の経験とヒントを共有してください!" > </el-input> </セクション> <el-button class="send" type="primary" size="medium" :icon="icon" >完了、レビューのために送信</el-button > </div> </テンプレート> <スクリプト> 「./stuff」からStuffをインポートします。 「./step-upload」からアップロードをインポートします。 「@/components/upload-img」からUploadImgをインポートします。 「@/service/api」から { getProperty、getClassify、publish } をインポートします。 定数raw_materia_struct = { 名前: ""、 仕様: "", }; エクスポートデフォルト{ 名前: "作成", コンポーネント: { Stuff、Upload、UploadImg }, データ() { 戻る { バックデータ: { タイトル: ""、 財産: {}、 分類: "", 製品画像URL: "", 製品ストーリー: "", 原材料: { 原材料: 配列(3) .fill(1) .map(() => ({ ...raw_materia_struct })), アクセサリー素材: 配列(3) .fill(1) .map(() => ({ ...raw_materia_struct })), }, }, プロパティ: [], 分類: [], }; }, マウント() { getProperty().then(({データ}) => { コンソールにログ出力します。 this.property = データ; this.backData.property = data.reduce((o, item) => { o[item.title] = ""; o を返します。 }, {}); // コンソールログ(データ); // console.log(this.backData.property) }); getClassify().then(({データ}) => { コンソールにログ出力します。 this.classifies = データ; }); }, メソッド: { 追加() { コンソールログ(1); }, }, }; </スクリプト> <style lang="スタイラス"> .create-introduce 背景色 #fff パディング 20px .ステップ追加ボタン 左余白 100px 。作成する 幅 100% h2 テキストを中央揃えにする マージン 20px 0 。送信 // ff3232() 高さ: 70px; 幅: 220ピクセル; 背景 #ff3232 色 #fff 境界なし マージン 20px 自動 表示ブロック h5 マージン 20px 0 .create-input 入力 幅446ピクセル 行の高さ 22px .アップロード-画像ボックス .アップロード画像 左に浮かぶ .テキストの紹介 左に浮かぶ .el-テキストエリア 幅 60% 左余白 10px </スタイル> 以上が Vue フォームに関する説明です。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: docker を使用してシンプルな C/C++ プログラムをデプロイする方法
>>: mysqlはエクスポートされたデータのsqlファイルから指定されたテーブルのみをインポートすることを実装します
<br />原文: http://research.microsoft.com/~hel...
目次1. 背景: 2. デザインのアイデア: 3. 起動スクリプトを書く4. イメージを構築する5....
より使いやすい Web アプリケーションを設計するための 10 のヒントをご紹介します。ヒント1: ...
この記事の例では、ユーザー登録機能を実装するためのjsの具体的なコードを参考までに共有しています。具...
暗い背景スタイルのページ デザインは非常に人気があり、シックでエレガント、そして非常にクリエイティブ...
目次序文1. 基本環境1. サービス配信2. ネットワーク構成(全ノード) 3. SSHパスワードフ...
1. オーバーフロー:非表示 オーバーフロー非表示要素に overflow:hidden が設定さ...
1. 既存のnginxがipv6をサポートしているかどうかを確認する既存の nginx が ipv6...
目次1. 基本的な使い方2. 指示の動作原理2.1. 初期化2.2 テンプレートのコンパイル2.3....
ウェブサイトの構築では、HTML と CSS に関するさまざまな問題に常に遭遇します。ウェブサイト ...
MySQL では lastIndexOf に似た関数を使用する必要がある場合もありますが、すぐに使用...
少し前に、製品バージョンをテスト用にテスターに提出したのですが、テスト結果はまったく予想外のもの...
目次基本的なセレクター:レベルセレクター:属性セレクター:フィルターセレクター:フォーム属性セレクタ...
プロジェクト中、プログレスバーを実装するために js の requestAnimationFrame...
目次アレイ重複排除1 2層forループ(バブルソートの2層ループ記述に類似) 2 ループとインデック...