この記事では、参考までに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 - データベース内の関数の適用の詳細な説明
1. フォントのプロパティcolorは、div{color:red;}のようにテキストの色を指定しま...
序文ジェネレーター関数は、async/await が導入される前から JavaScript に存在し...
MySQL を初めて学ぶときは、区切り文字の本当の目的を理解していないかもしれません。区切り文字は、...
Linuxインスタンスでpipを使用する際のタイムアウト問題を解決する方法pip は最も人気のある ...
この記事では、jsでスライダーをドラッグする方法の具体的なコードを参考までに共有します。具体的な内容...
序文:サンドボックスといえば、私たちの頭には反射的に上の写真が思い浮かび、すぐに興味がわいてくるかも...
目次説明する成し遂げるプロジェクトのディレクトリ構造は次のとおりです。効果図は以下のとおりです要約す...
要約すれば: 1. データベースの設計とテーブルの作成時にパフォーマンスを考慮する2. SQLの記述...
結果:実装コードhtml <div class='iphone'> &l...
マウスをドラッグしてページのスクリーンショットを撮ります(指定した領域にスクリーンショットをドラッグ...
この記事では、支払いの10秒カウントダウンを実現するためのJavaScriptの具体的なコードを参考...
MySQL 5.5 のインストールと設定方法のグラフィックチュートリアルMySQL 5.5 のインス...
目次1. ダウンロード2. 展開3. Nginxログ関連の設定4. ファイルダウンローダーとして n...
この記事では、要素をドラッグするときにプレビューを追加する小さなデモを紹介します。効果は次のとおりで...
序文多くの Web アプリケーションは、リレーショナル データベース管理システム (RDBMS) に...