この記事では、フォーム検証を実装するための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ファイルから指定されたテーブルのみをインポートすることを実装します
ミラーを探すDocker Hubのウェブサイトからイメージを検索できます。Docker Hubのウェ...
nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...
システム: Ubuntu 16.04LTS 1\公式サイトからmysql-5.7.18-linux-...
イメージを構築するイメージを構築するには、主に 2 つの方法があります。実行中のコンテナをイメージに...
Hiveのインストールディレクトリで、confディレクトリに入り、hive-site.xmlファイル...
Zhihu Discovery コラムのタイトル画像は、通常、以下のように表示されます。明らかに、グ...
MySQL 全文検索中国語ソリューション最近、会社のプロジェクトで、データベースで中国語を検索する機...
目次1. 基本的なイベント処理2. 親コンポーネントにカスタムイベントを送信するマウス修飾子4. キ...
システムとユーザー環境の設計<br />Apple システムの成功は、そのシステム アー...
前回の記事では、openssl を使用して無料の証明書を生成した後、この証明書を使用してローカル ノ...
序文Linux システムの管理と保守のプロセスでは、多数のコマンドが使用されます。非常に長いコマンド...
MySQLサーバーは--skip-grant-tablesオプションで実行されているため、このステー...
私は最近、ユーザー操作を元に戻す、またはやり直す機能を備えたビジュアル操作プラットフォームを開発して...
Nginx は、リバース プロキシ機能を使用して負荷分散を実装できるほか、フォワード プロキシ機能を...
今日から、定期的にちょっとした豆知識を整理していきます。簡単なものもあるかもしれませんが、どれも役に...