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