VueのTodoListケースの詳しい説明

VueのTodoListケースの詳しい説明

ここに画像の説明を挿入

ここに画像の説明を挿入

<テンプレート>
  <div id="ルート">
    <div class="todo-container">
      <div class="todo-wrap">
        <トップ:received="受信済み" />
        <リスト :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />
        <下部 :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo" />
      </div>
    </div>
  </div>
</テンプレート>
<スクリプト>
  './components/Top.vue' から Top をインポートします。
  './components/Bottom.vue' から Bottom をインポートします。
  './components/List.vue' からリストをインポートします。
  エクスポートデフォルト{
    名前: 'アプリ'、
    コンポーネント:
      トップ、
      リスト、
      底
    },
    データ() {
      戻る {
        すべて: [{
            id: '001',
            タイトル:「食べる」
            完了: true
          },
          {
            id: '002',
            タイトル:「眠り」
            完了: false
          },
          {
            id: '003',
            タイトル: 「Playing Beans」、
            完了: false
          },
        ]
      }
    },
    メソッド: {
      //ToDoを追加
      受信した(todoObj) {
        todoObj を unshift します。
      },
      //ToDoのチェックを外す
      チェックTodo(id) {
        this.todos.forEach((todo) => {
          //関数本体if (todo.id === id) todo.done = !todo.done;
        })
      },
      //TodoIDを削除する{
        this.todos = this.todos.filter(todo => todo.id !== id)
      },
      //すべて選択または選択解除 checkAllTodo(done) {
        this.todos.forEach((todo) => {
          todo.done = 完了
        })
      },
      // 完了したデータをすべてクリアする clearAllTodo() {
        this.todos = this.todos.filter((todo) => {
          !todo.done を返す
        })
      }
    }
  }
</スクリプト>
<スタイル lang="css">
  /*ベース*/
  体 {
    背景: #fff;
  }
  .btn{
    表示: インラインブロック;
    パディング: 4px 12px;
    下マージン: 0;
    フォントサイズ: 14px;
    行の高さ: 20px;
    テキスト配置: 中央;
    垂直位置合わせ: 中央;
    カーソル: ポインタ;
    ボックスシャドウ: インセット 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    境界線の半径: 4px;
  }
  .btn-危険{
    色: #fff;
    背景色: #da4f49;
    境界線: 1px 実線 #bd362f;
  }
  .btn-危険:ホバー{
    色: #fff;
    背景色: #bd362f;
  }
  .btn:フォーカス {
    アウトライン: なし;
  }
  .todoコンテナ{
    幅: 600ピクセル;
    マージン: 0 自動;
  }
  .todoコンテナ .todoラップ {
    パディング: 10px;
    境界線: 1px 実線 #ddd;
    境界線の半径: 5px;
  }
</スタイル>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • VueはTodoListの例をカプセル化し、ブラウザのローカルキャッシュのアプリケーションを実装します。
  • vuex のシンプルな todolist の例の詳細な説明
  • Vue は TodoList から親子コンポーネントの通信を学習します
  • Vuejs はシンプルな todoList 関数とコンポーネントのサンプルコードを実装します
  • vue.js の todoList プロジェクトの例

<<:  CSS でのフレックスレイアウトの詳細な説明

>>:  HTML ページ出力で従うべきいくつかの原則の要約

推薦する

MySQL 5.6 ルートパスワード変更チュートリアル

1. MySQL 5.6をインストールした後、正常に有効化できないMySQL の圧縮バージョンは、解...

Nginx サーバーが Systemd カスタム サービス プロセス分析を追加

1. nginxを例に挙げるyumコマンドを使用してNginxをインストールしましたSystemd ...

Vue要素のバックグラウンド認証プロセスの分析

序文:最近、プロジェクトで管理システムに遭遇しました。権限設定が非常に興味深いと思いました。自分の学...

Linuxはデータディスクがアンインストールされ、新しいカスタムイメージを作成できることを確認します。

カスタムイメージに関するよくある質問データディスクを表示するにはどうすればいいですか? df コマン...

iframe タグの使用方法の詳細な説明 (属性、透明度、適応高さ)

1. iframe の定義と使用法iframe 要素は、別のドキュメントを含むインライン フレーム...

Jira リバース プロキシを実装するための nginx について

概要: nginx リバース プロキシ jira を構成し、https を実装します。Tomcat ...

jQueryは広告の表示と非表示のアニメーションを実装します

数秒後に広告が表示されて消えることがよくあります。この機能を実装するには、JQuery フレームワー...

Tinymce リッチテキストを使用して Vue のツールバーボタンをカスタマイズする実践

目次tinymce、tinymce ts、tinymce-vue 宣言ファイルをインストールするパッ...

MySQL シリーズ 9 MySQL クエリ キャッシュとインデックス

目次チュートリアルシリーズ1. MySQL アーキテクチャクエリキャッシュキャッシュされないクエリ:...

vueプロジェクトのマルチ環境設定(.env)の実装

目次マルチ環境構成とは何ですか? また、なぜそれが必要なのですか? .env ファイルはどこで設定さ...

Vueでショッピングカートのすべての機能を実装する簡単な方法

主な機能は次のとおりです。製品情報を追加する製品情報を変更する単一の製品を削除する複数の製品を削除す...

Linuxにソフトウェアをインストールするいくつかの方法の詳細な説明

1. RPM パッケージのインストール手順: 1. soft.version.rpm などの対応する...

JS ES の新機能: 拡張演算子の紹介

1. スプレッド演算子スプレッド演算子は 3 つのドット ... で、複数の引数 (関数呼び出しなど...

ReactJs 基礎チュートリアル - 基本編

目次1. ReactJS の紹介2. ReactJSの理解とReactJSの利点1. ReactJS...

Nginx 7層負荷分散のいくつかのスケジューリングアルゴリズムの簡単な理解

この記事は主に、Nginx 7 層負荷分散のいくつかのスケジューリング アルゴリズムを紹介します。こ...