この記事では、書籍管理を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は次のとおりです。 ケース効果 ケースアイデア 1. 書籍リスト
2. 本を追加する
3. 本を修正する
4. 本を削除する
5. 一般的な機能適用シナリオ
コード 基本スタイル <スタイル タイプ="text/css"> .グリッド{ マージン: 自動; 幅: 550ピクセル; テキスト配置: 中央; } .gridテーブル{ 幅: 100%; 境界線の折りたたみ: 折りたたみ; } .グリッド th、 td { パディング: 10; 境界線: 1px 破線オレンジ; 高さ: 35px; } .grid th { 背景色: オレンジ; } .grid .book { 幅: 550ピクセル; パディング下部: 10px; パディング上部: 5px; 背景色: 芝生の緑; } .grid .total { 高さ: 30px; 行の高さ: 30px; 背景色: 芝生の緑; border-top: 1px 実線オレンジ; } </スタイル> 静的レイアウト <div id="アプリ"> <div クラス = 'グリッド'> <div> <h1>書籍管理</h1> <div class="book"> <div> <ラベル for='id'> シリアルナンバー: </ラベル> <input type="text" id="id" v-model='id' :disabled='flag' v-focus> <ラベル名="name"> 名前: </ラベル> <input type="text" id='名前' v-model='名前'> <button @click='handle' :disabled='submitFlag'>送信</button> </div> </div> </div> <div クラス = 'total'> <span>書籍の総数:</span><span>{{total}}</span> </div> <テーブル> <頭> <tr> <th>番号</th> <th>名前</th> <th>時間</th> <th>オペレーション</th> </tr> </thead> <t本文> <tr :key="item.id" v-for="書籍内のアイテム"> <td>{{item.id}}</td> <td>{{アイテム名}}</td> <td>{{item.date | format('yyyy-MM-dd hh:MM:ss')}}</td> <td><a href="" @click.prevent='toEdit(item.id)'>編集</a> <span>|</span> <a href="" @click.prevent='deleteBook(item.id)'>削除</a> </td> </tr> </tbody> </テーブル> </div> </div> 効果の実現 <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> Vue.directive('focus', { 挿入: 関数 (el) { el.focus(); } }) Vue.filter('format', 関数(値, 引数) { 関数 dateFormat(日付, 形式) { if (typeof date === "文字列") { var mts = date.match(/(\/Date\((\d +)\)\/)/); (mts && mts.length >= 3)の場合{ 日付 = parseInt(mts[2]); } } date = 新しい Date(date); if (!date || date.toUTCString() == "無効な日付") { 戻る ""; } varマップ = { "M": date.getMonth() + 1, //月 "d": date.getDate(), //日 "h": date.getHours(), //時間 "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //四半期 "S": date.getMilliseconds() //ミリ秒 }; フォーマット = format.replace(/([yMdhmsqS])+/g, 関数(all, t) { var v = map[t]; (v != 未定義)の場合{ (すべて長さ>1)の場合{ v = '0' + v; v = v.substr(v.length - 2); } v を返します。 } そうでなければ (t === 'y') { 戻り値: (date.getFullYear() + '').substr(4 - all.length); } すべてを返します。 }); 戻り形式; } dateFormat(値、引数)を返します。 }) var vm = 新しい Vue({ el: '#app', データ: { フラグ: false、 送信フラグ: false、 id: ''、 名前: ''、 書籍: [] }, メソッド: { ハンドル: 関数 () { if (this.flag) { // 編集操作 // は、現在の ID に従って配列内の対応するデータを更新することです this.books.some((item) => { (item.id == this.id)の場合{ アイテム名 = this.name //更新操作が完了したらループを終了します。true を返します。 } }) this.flag = false; } それ以外 { // 本を追加します var book = {}; このブックのidは、 このブックの名前は、 this.data = ''; this.books.push(本); } // フォームをクリアします this.id = ''; this.name = ''; }, toEdit: 関数 (id) { // IDの変更を無効にする this.flag = true; // 編集するデータをIDに基づいてクエリする var book = this.books.filter(function (item) { item.id == id を返します。 }); コンソール.log(ブック) //取得したIDをフォームに送信します。this.id = book[0].id; this.name = 本[0].name; }, deleteBook: 関数 (id) { // 本を削除する // ID に従って配列から要素のインデックスを検索する // var index = this.books.findIndex(function (item) { // item.id == id を返します。 // }); // インデックスに従って配列要素を削除します // this.books.splice(index, 1) // ----------------- // 方法 2: フィルターメソッドによる削除 this.books = this.books.filter(function (item) { item.id != id を返します。 }) } }, 計算: { 合計: 関数 () { // 本の総数を計算します。 return this.books.length; } }, 時計: 名前: 関数 (値) { // 書籍名がすでに存在することを確認する var flag = this.books.some(function (item) { return item.name == val; }) if (フラグ) { // 書籍名が存在する this.submitFlag = true } それ以外 { // 書籍名が存在しません this.submitFlag = false } } }, マウント: 関数 () { // ライフサイクルフック関数がトリガーされたとき。テンプレートはすぐに使用できます // 通常は背景データを取得し、そのデータをテンプレートに入力するために使用されます var data = [{ id: 1, タイトル:『三国志演義』 日付: 252597867777 }, { id: 2, 作品名:『水滸伝』 日付: 564634563453 }, { id: 3, タイトル: 『紅楼夢』 日付: 345435345343 }, { id: 4, 題名:『西遊記』 日付: 345345346533 }] this.books = データ } }); </スクリプト> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CentOS7 構成 Alibaba Cloud yum ソースメソッドコード
>>: Linux で unzip コマンドを使用して複数のファイルを解凍する方法
目次1. 父と息子のコミュニケーション1.1 親コンポーネント --> 子コンポーネント1.2...
この記事では、カラフルな太陽のハロー効果を実現するためのJavaScriptキャンバスの具体的なコー...
1. インストールapt-get install mysql-server にはアカウントとパスワー...
ElementUIページングコンポーネントPagination in Vueの使用は参考になります。...
システムをコンピューターにインストールする方法がわからない場合は、Linux を学習したい場合は、仮...
MySQL では、ソートには order by を、ページングには limit をよく使用します。最...
これまでの数年間、私はいわゆる「設計仕様」についてかなりの数の執筆やコンサルティングを行ってきました...
1. Compose の紹介Compose は、マルチコンテナ Docker アプリケーションを定義...
目次1. クラス1.1 コンストラクタ() 1.2 ゲッターとセッター1.3 これ1.4 静的プロパ...
この記事ではMySQL 8.0.12のインストールと設定方法を参考までに記録します。具体的な内容は以...
私はデータベースツールとして Navicat を使用しています。他のものも同様です。 1. Navi...
実装のアイデア: CSSでtext-shadowを使用してテキストの光る効果を実現します効果画像: ...
先ほど、Docker を使用して SpringBoot プロジェクトを簡単にデプロイし、Docker...
目次1. ステートフック1. 基本的な使い方2. 更新3. 合併を実現する4. 遅延初期化状態5. ...
この記事では、写真の自動再生効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な...