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 - データベース内の関数の適用の詳細な説明
推薦する
Vueのキーボードイベントの詳細な説明
目次共通キーエイリアスエイリアスが指定されていないキーシステム修飾キーカスタムキーエイリアス要約する...
デザイナーの「職業病」について
デザイナーは世界で最も繊細で感情的な人々だと私はいつも感じています。私がこう言うときに優越感を感じる...
DockerはPruneコマンドを使用してnoneイメージをクリーンアップします
目次無イメージの創造と混乱Noneオブジェクトをクリーンアップする方法トリムミラーコンテナで使用され...
Linux lseek関数の使い方の詳しい説明
注：記事に誤りがある場合は、メッセージを残して指摘してください。ご協力ありがとうございます。名前名前...
vue3.0 でカルーセル コンポーネントをカプセル化する手順
目次1: カプセル化の考え方2. 包装工程3: ドットインジケーター4: 左と右のインジケーター5:...
Docker で Harbor パブリック リポジトリを構築する方法の例
前回のブログ投稿では、レジストリのプライベート ウェアハウスについて説明しました。今日は、Harbo...
フロントエンドネットワーク、JavaScriptの最適化、開発のヒントについて簡単に説明します。
1. ネットワークの最適化YSlowには23のルールがあります。これら数十のルールは、主に、不要な...
CSS初心者向けチュートリアル: 背景画像を画面全体に表示する
インターフェース全体に背景画像を表示したい場合は、当然 body に背景を追加することを考えます。コ...
XHTML 入門チュートリアル: テーブルタグの応用
<br />テーブルは XHTML では扱いにくいタグなので、このセクションで理解するだ...
Vue プロジェクトでのスキャンコード決済の実装例 (デモ付き)
目次需要背景思考分析UI 表示始める1. 支払いコンポーネントテンプレートを作成する2. 支払いコン...
docker-maven-pluginプラグインは対応するjarパッケージを取得できません
docker-maven-plugin プラグインを使用する場合、Maven は対応する jar パ...
Linux で MySQL 8.0 バージョンをアンインストールする方法
1. MySQLをシャットダウンする [root@localhost /]# サービスmysqldを...
カルーセル効果を実現するためのネイティブJavaScript+CSS
この記事では、参考までに、カルーセル効果の具体的なコードをJavaScript+CSSを使用して実装...
HTML における if 判断の使用
Django Web開発の過程で、HTMLを書く際にバックエンドから同じ名前のリスト変数が渡されるが...
SQL ROW_NUMBER() および OVER() メソッドのケーススタディ
構文フォーマット: row_number() over(partition by grouping ...