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 - データベース内の関数の適用の詳細な説明
推薦する
知らないかもしれない実用的なTypeScriptのヒント
目次序文関数のオーバーロードマッピングタイプ部分的、読み取り専用、Null 可能、必須選択、記録除外...
MySQL binlog_ignore_dbパラメータの具体的な使用法
序文：前の記事を読んだ後、binlog はデータベースで実行されたすべての DDL および DML ...
IDEA が docker を統合して springboot プロジェクトを展開するプロセス全体
目次1. IDEAはdockerプラグインをダウンロードします2. クラウドサーバーDocker 2...
Mariadb リモート ログイン構成と問題解決
序文：インストール プロセスについては詳しく説明しません。問題に直接触れましょう。MySQL のリモ...
CSS で縦書きテキスト配置を実装する方法 (概要)
HTML でのテキストのデフォルトの配置は水平ですが、特殊な場合にはテキストを垂直に配置する必要が...
sshとは何ですか?使い方は？どのような誤解があるのでしょうか?
目次序文SSHとは何かssh は何に使用されますか? sshの使い方ssh 再修正要約する序文ssh...
Vue でのテキストエリア適応高さソリューションの実装
目次隠れた問題適応高さのソリューションまず解決策を提示してください。Vueスタックが必要な学生はvu...
LDAP ユーザー認証を使用するように Linux を構成する方法
私は CentOS に実装された LDAP ユーザー管理を使用しています。これはインターネット上のほ...
PC/Pad/Phoneデバイスに自動的に適応するCSSウェブページレスポンシブレイアウト
序文最近は、PC、iPad、携帯電話、スマートウォッチ、スマートテレビなど、さまざまなデバイスが存在...
Docker Swarm を使用してサービスのローリング アップデートを実装するためのサンプル コード
1. Docker Swarm とは何ですか? Docker Swarm は、Docker が公式に...
HTML インライン要素と HTML ブロックレベル要素の概要と違い
ブロックレベル要素の機能: • 常に新しい行から始まり、それ自体で 1 行を占め、後続の要素も新しい...
スタイルをより標準化するための CSS の書き方に関する 5 つのヒント
1. CSSをアルファベット順に並べるアルファベット順ではありません:コードをコピーコードは次のとお...
VMware Workstation 14 Pro インストール Ubuntu 16.04 チュートリアル
この記事では、VMware Workstation14 ProにUbuntu 16.04をインストー...
更新SQL文に基づくMySQLロックの理解
序文MySQL データベース ロックは、データの一貫性を実現し、同時実行性の問題を解決するための重要...
MySQLソートにおけるCASE WHENの使用例
序文以前のプロジェクトでは、SQL の CASE WHEN ソート関数が使用されました。ではブログメ...