この記事では、参考までにEasy Notepadを実装するためのVueの具体的なコードを紹介します。具体的な内容は次のとおりです。 CSSコード #todoアプリ{ マージン: 0 400px; 幅: 600ピクセル; 背景色: グレー; テキスト配置: 中央; } 。コンテンツ { マージン:0px 100px; } .todo { マージン: 10px; テキスト配置: 左; 背景色:緑; } .btn{ フロート: 右; 背景色: 芝生の緑; } 。クリア{ 背景色: ライトシーグリーン; } 。リスト{ 左マージン: 10px; } HTML コードと JS コード <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <link rel="スタイルシート" href="./css/index.css" > <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <本文> <div id="todoapp"> <div class="header"> <h1>小さな黒いメモ帳</h1> <input type="text" v-model="inputValue" placeholder="タスクを入力してください"> <button @click="add">追加</button> </div> <div class="content"> <ul class="todolist" v-for="(item,index) リスト内"> <div class="todo"> <span class="index">{{index+1}}</span><label class="list">{{item}}</label><button class="btn" @click="remove(index)">削除</button> </div> </ul> </div> <div> <button @click="clearBoth" class="clear">すべてクリア</button> </div> </div> <スクリプト> var アプリ = 新しい Vue({ el:"#todoapp", データ: { リスト:["食べる","ゲームをする","スイカを食べる"], 入力値:"" }, メソッド: { 削除:関数(インデックス){ this.list.splice(インデックス,1) }, 追加: 関数 () { this.list.push(this.inputValue) }, 両方をクリア:関数(){ this.list.splice(0,this.list.length) } } }) </スクリプト> </本文> </html> ランニングエフェクトのスクリーンショット 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CentOS7でパーティションのサイズを変更する方法
>>: MySQL データベース 8 - データベース内の関数の適用の詳細な説明
本格的な MySQL 最適化! MySQL のデータ量が少ない場合は最適化は不要です。データ量が多い...
MySQL は、スウェーデンの会社 MySQL AB によって開発され、現在は Oracle が所有...
1. this.$router.push() 1. ビュー <テンプレート> <d...
背景今日、CodePen を閲覧していたところ、非常に興味深い効果を見つけました。 CodePen ...
目次オープニングシーンv-for を使用した直接レンダリングカスタムコンポーネントで直接レンダリング...
[問題の説明]私たちの実稼働環境には、複数の MySQL サーバー (MySQL 5.6.21) の...
1. 同じタイプの空の要素を追加し、要素の CSS 属性 clear:both; を設定します。 ...
この記事では、例を使用して、MySQL スケジュール タスクの実装と使用方法を説明します。ご参考まで...
1. 事前に準備する便宜上、ここで 2 つのテーブルを作成し、そこにいくつかのデータを追加します。果...
先週、先生が私に数字当てゲームをするちょっとした宿題を出しました。とても面白いと思ったので、適当に書...
まず依存関係をインストールする必要があります npm i lib-flexible-computer...
1. デフォルトのポート8080に加えて、ドメイン名のアクセスとserver.xmlのオープンにポー...
1. ユーザーにルーチン作成権限がある場合は、プロシージャ | 関数を作成できます。 2. ユーザー...
目次1. Consulクラスタをデプロイする1. 準備3. Consulクラスタを作成する4. 管理...
最初のもの: 1. 主要なヘッダーファイルを追加します。 #include <linux/of...