vue シンプルメモ帳開発の詳しい説明
|
この記事では、参考までに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 - データベース内の関数の適用の詳細な説明
推薦する
Linux で crontab 出力リダイレクトが有効にならない問題の解決方法
質問LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...
SecureCRT に基づくリモート Linux ホストへのファイルのアップロードとダウンロードのグラフィカルな手順
wget や curl ツールを使用して、Linux サーバーで大規模なネットワーク ファイルを直接...
MySQL と接続関連のタイムアウトの詳細な概要
MySQL と接続関連のタイムアウト序文：今日、同僚から、データ量が多いときに MySQL データベ...
JS の原価と基準価額の問題に関する簡単な分析
プリミティブ値 -> プリミティブ型Number String Boolean undefin...
Docker を使用して nginx で tomcat クラスターを構築する方法 (画像とテキスト付き)
まず、Tomcatフォルダを作成します。Dockerの設定を容易にするために、ルートディレクトリに直...
WeChat公式アカウントでReactプロジェクトを実行する方法
目次1. a タグを使用して PDF をプレビューまたはダウンロードします。書き方は、携帯電話でクリ...
Mysql データベースのマスタースレーブ同期構成
目次Mysql マスタースレーブ同期構成1. 2つのmysqlをインストールする2. MySQL設定...
Expressを使用してプロジェクトを自動的にビルドするNode.jsのプロセス全体
1. Expressライブラリとジェネレータをインストールするcmdを開いて、次のコマンドを入力しま...
MySQL 8.0.18 のインストールと設定方法のグラフィックチュートリアル (Windows 10 版)
この記事は、参考のためにMySQL 8.0.18のインストールと設定のグラフィックチュートリアルを記...
Chrome タブバーを実装するための CSS のヒント
今回は、Google Chrome のタブバーのような、特殊な丸い角を持つナビゲーション バーのレイ...
js ドラッグ アンド ドロップ テーブルでコンテンツ計算を実現する
この記事の例では、コンテンツの計算を実現するためのjsドラッグアンドドロップテーブルの具体的なコード...
mysql 一時テーブルの使用状況の分析 [クエリ結果は一時テーブルに保存できます]
この記事では、例を使用して MySQL 一時テーブルの使用方法を説明します。ご参考までに、詳細は以下...
CSS3のtext-fill-colorプロパティの詳細な説明
text-fill-color とは何を意味しますか?文字通りの意味から言えば、「テキストの塗りつぶ...
Linux inotifyリアルタイムバックアップの実装方法の詳細説明
リアルタイム レプリケーションは、企業データをバックアップする最も重要な方法です。主に、ユーザーが送...
MySQL データベース内の数十億のデータを素早くクリーンアップする方法
今日、ディスクアラーム例外を受け取りました。50G ディスクが爆発しました。分析と解決のプロセスは次...