Vueはシンプルなメモ帳機能を実装します

この記事では、参考までに、簡単なメモ帳機能を実装するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません: