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ダイナミックリンクライブラリの使用
通常のプログラムと比較すると、ダイナミック リンク ライブラリにはメイン関数がなく、一連の関数の実装...
ウェブデザインにおけるキーワード設計手法の紹介
多くの場合、ホームページを作成するときに、Web ページ ヘッダー属性の設定を無視します。 Web ...
MySQL が my.cnf を読み込む順序の詳細
目次MySQLがmy.cnfを読み込む順序1. mysql.server の起動方法2. mysql...
Dockerプライベートライブラリの実装
プライベート Docker レジストリのインストールとデプロイは、Docker テクノロジーを導入、...
docker compose を使用して FastDfs ファイル サーバーをインストールする詳細な例
ドッカーの作成 バージョン: '2' サービス: fastdfsトラッカー: ホスト...
同期スクロールを実現するための複数のテーブル要素のサンプルコード
Element UIは、複数のテーブルを同時に水平および垂直にスクロールすることを実装します。 コー...
JavaScriptはシンプルな日付効果を実装します
JavaScriptの日付エフェクトの具体的なコードは参考用です。具体的な内容は次のとおりです。コー...
HTMLフォーム要素の詳しい解説（パート1）
HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。 HTML フォー...
MySQLテーブルのフィールドと関連属性をエクスポートする手順
データベース内のテーブルのフィールドとプロパティをエクスポートし、テーブルを作成してWordに保存す...
DockerHubイメージリポジトリの使い方の詳しい説明
これまで使用していたイメージはすべて DockerHub パブリック リポジトリから取得していました...
vue3 watch と watchEffect の使い方と違い
1.リスナーを見る時計のご紹介 'vue' から { ref, reactive, ...
Prometheus を使用して、MySQL の自動増分主キーの残りの使用可能パーセンテージをカウントします。
最近、本番環境のデータベースがログデータを狂ったように書き込み、主キー値のオーバーフローを引き起こし...
CentOS に Nginx をインストールする方法
公式ドキュメント: https://nginx.org/en/linux_packages.html...
keepalived+nginx の高可用性を実装する方法の例
1. keepalived の紹介Keepalived は、もともと LVS クラスタ システム内の...
2019 年に最も役立ち重要なオープンソース ツール トップ 10
Black Duck の 2017 年のオープンソース調査では、回答者の 77% がオープンソース...