この記事では、参考までに、簡単なメモ帳機能を実装するためのVueの具体的なコードを紹介します。具体的な内容は次のとおりです。 プレビュー画像: 機能は次のとおりです。 (1)タスクを入力し、Enterキーを押してタスクリストに追加します(重複したタスクは入力できません) (2)「削除」をクリックすると、対応するタスクが削除されます。 (3)「クリア」をクリックすると、すべてのタスクが削除されます。 (4)タスクの合計数は左下隅に同期して表示されます。 完全なコードは次のとおりです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>メモ帳</title> <スタイル> * { マージン: 0; パディング: 0; } #todoアプリ{ 幅: 600ピクセル; 背景色: rgba(19, 161, 114, 0.63); フォントファミリー: サンセリフ; } .header>h1 { パディング: 20px 0; テキスト配置: 中央; フォントサイズ: 40px; 色: ホワイトスモーク; } .新しいタスク { 表示: ブロック; 幅: 500ピクセル; 高さ: 50px; 行の高さ: 50px; 左パディング: 10px; マージン: 0 自動; フォントサイズ: 20px; アウトライン: なし; 境界線: なし; } .todolist li { 高さ: 30px; 行の高さ: 30px; 左パディング: 15px; マージン: 10px 0; フォントサイズ: 25px; 色: 白; } .todolist .item { 左マージン: 15px; } 。破壊する、 。クリア { 幅: 50px; 高さ: 30px; フロート: 右; 色: 白; 背景色: 透明; 境界線: なし; フォントサイズ: 20px; } .フッター{ 幅: 600ピクセル; 高さ: 30px; パディング: 10px 0; 垂直位置合わせ: 中央; } .footer p { 表示: インラインブロック; 左パディング: 15px; 色: 白; フォントサイズ: 20px; } </スタイル> </head> <本文> <セクション id="todoapp"> <ヘッダークラス="ヘッダー"> <h1>メモ帳</h1> <input type="text" v-model="newItem" class="newTask" placeholder="タスクを入力してください" @keyup.enter="add"> </ヘッダー> <セクション> <ul class="todolist"> <li v-for="(リスト内の項目、インデックス)"> <div> <span>{{ インデックス + 1 }}</span> <label class="item">{{ アイテム }}</label> <button class="destroy" @click="del(index)">削除</button> </div> </li> </ul> </セクション> <フッタークラス="フッター"> <p class="count"> アイテム: {{ list.length }} </p> <button class="clear" @click="clear" v-show="list.length != 0">クリア</button> </フッター> </セクション> <script src="./vue.js"></script> <スクリプト> constアプリ = 新しいVue({ el: "#todoapp", データ: { リスト: [], 新しいアイテム: "" }, メソッド: { 追加() { if (this.newItem == "") { 戻る; } それ以外 { if (!this.list.includes(this.newItem)) { this.list.push(this.newItem); this.newItem = ""; } それ以外 { alert("重複するイベントを追加しないでください!"); this.newItem = ""; } } }, del(インデックス) { this.list.splice(インデックス、1); }, クリア() { このリスト = []; } } }) </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: IDEA は Docker プラグインを使用します (初心者向けチュートリアル)
>>: 低バージョンの Druid 接続プール + MySQL ドライバー 8.0 により、スレッドがブロックされ、パフォーマンスが制限される
ページで CSS を使用する主な方法は、スタイル属性値をインラインで追加する方法、ページ ヘッダーで...
1. 基本構造:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBL...
<br />原文: http://andymao.com/andy/post/103.h...
今日は nginx サーバーを使用するのですが、vue プロジェクトをサーバーにデプロイする必要もあ...
目次1. ページレイアウト2. 画像のアップロードと表示3. キャンバスを初期化する4. テンプレー...
今日は、CSS 3.0 で実装されたネオン ボタン アニメーション効果を紹介します。効果は次のとおり...
目次序文1. ラベルスタイルを定義する2. GeoJSONデータのシミュレーション3. Vercto...
mysql 1 つのテーブル列を別のテーブルにコピーする場合によっては、フィールドから別の新しいフィ...
ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...
<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理...
最近、Docker とホストが同じネットワーク セグメント上で通信する問題を解決し、そのプロセス全体...
Linux でファイルを見つけたいのに、その場所がわからないことがよくあります。次のコマンドを使用し...
rpmコマンドがソフトウェアのインストールに使用するパラメータはどれですか: -i rpm コマンド...
チェックボックスは Web ページで非常によく使用されます。e コマースの Web サイトでもプラッ...
この記事では、LinuxにバイナリモードでMySQLをインストールする具体的な手順を参考までに紹介し...