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 - データベース内の関数の適用の詳細な説明
推薦する
MySQL ビッグデータ クエリ最適化エクスペリエンスの共有 (推奨)
本格的な MySQL 最適化! MySQL のデータ量が少ない場合は最適化は不要です。データ量が多い...
MySQL データベースのインストールと Navicat for MySQL の使用に関するチュートリアル
MySQL は、スウェーデンの会社 MySQL AB によって開発され、現在は Oracle が所有...
Vueページジャンプの実装方法
1. this.$router.push() 1. ビュー <テンプレート> <d...
JSはclip-pathを使用して動的領域クリッピング機能を実装します
背景今日、CodePen を閲覧していたところ、非常に興味深い効果を見つけました。 CodePen ...
キープアライブキャッシュをクリアする方法の詳細なグラフィック説明
目次オープニングシーンv-for を使用した直接レンダリングカスタムコンポーネントで直接レンダリング...
MySQLインスタンスクラッシュ事例の詳細な分析
[問題の説明]私たちの実稼働環境には、複数の MySQL サーバー (MySQL 5.6.21) の...
フローティングをクリアするいくつかの方法（推奨）
1. 同じタイプの空の要素を追加し、要素の CSS 属性 clear:both; を設定します。 ...
MySQL スケジュールタスクの実装と使用例
この記事では、例を使用して、MySQL スケジュール タスクの実装と使用方法を説明します。ご参考まで...
MySQL における in と exists の違いの詳細な説明
1. 事前に準備する便宜上、ここで 2 つのテーブルを作成し、そこにいくつかのデータを追加します。果...
js を使用して数字推測ゲームを実装する
先週、先生が私に数字当てゲームをするちょっとした宿題を出しました。とても面白いと思ったので、適当に書...
Vue3.0 異なる解像度のコンピュータの適応操作
まず依存関係をインストールする必要があります npm i lib-flexible-computer...
Tomcat マルチポートドメイン名アクセスと gzip 圧縮方式を有効にする構成
1. デフォルトのポート8080に加えて、ドメイン名のアクセスとserver.xmlのオープンにポー...
MySQL 作成ルーチン権限に関する注意事項
1. ユーザーにルーチン作成権限がある場合は、プロシージャ | 関数を作成できます。 2. ユーザー...
nginx をベースにリロードなしでアップストリーム サーバーの動的な自動起動と停止を実装する方法
目次1. Consulクラスタをデプロイする1. 準備3. Consulクラスタを作成する4. 管理...
Linux または Android でファイル システムを追加する属性インターフェイスを解析する方法
最初のもの: 1. 主要なヘッダーファイルを追加します。 #include <linux/of...