この記事では、Vueの簡単なコメント機能を実装するための具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 1. これは私の研究の一例です。いくつか不備があります。アドバイスをいただければ幸いです。ありがとうございます〜 2. コメント投稿の効果 「公開」をクリックした後の効果(コメント全体を削除したい場合は、各コメントの後に「削除」をクリックしてください) 3. 完全なコード表示 (私の HTML 構造は乱雑です。ここで、クラスが定義されていない div は削除できることを思い出してください。スタイルを記述しやすくするために、div をさらに追加しました) 念のため、vue.jsをインポートするのを忘れないようにしてください。また、保存場所に応じてディレクトリを変更することを忘れないでください。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <タイトル></タイトル> <script src="./vue.js"></script> <スタイル タイプ="text/css"> *{ マージン: 0;パディング: 0; ボックスのサイズ: 境界線ボックス; } #アプリ{ 幅: 700ピクセル; 高さ: 650px; マージン: 自動; 境界線: 1px 実線 #ccc; } #アプリ h1{ 幅: 700ピクセル; フォントの太さ: 400; 行の高さ: 100px; 左パディング: 20px; 背景色: #cccccc; 下マージン: 20px; } #app>div{ パディング: 0 20px; } #app>div>入力{ 幅: 200ピクセル; 高さ: 30px; パディング: 0 5px; マージン: 5px 0; } #app>div>テキストエリア{ パディング: 5px; 上マージン: 5px; } .cont div{ 高さ: 50px; 境界線: 1px 実線 #acacac; 境界線の半径: 5px; パディング: 0 10px; } .cont div span{ パディング: 0 5px; 行の高さ: 50px; } .cont p{ 表示: インラインブロック; } .cont div p:n番目の型(1){ 色: #550000; } .cont div p:n番目の型(2){ 色: #595959; } .cont .del{ フロート: 右; 行の高さ: 50px; 色: #003366; カーソル: ポインタ; } .cont .del:hover{ 色: #550000; } 。送信{ 幅: 80ピクセル; 高さ: 30px; 上マージン: 10px; } 時間{ 境界線: 1px 実線 #bababa; マージン: 15px 0; } h3{ フォントの太さ: 400; 色: #333; 下マージン: 10px; } </スタイル> </head> <本文> <div id="アプリ"> <h1>トゥカオホールへようこそ</h1> <div> <label>ユーザー名:</label><br> <!-- .trim はコンテンツ内のスペースを削除します --> <!-- v-model はフォームの (uname) 値をバインドします --> <input type="text" placeholder="ユーザー名" v-model.trim="uname" /><br> <label>コメント:</label><br> <textarea rows="2" cols="23" placeholder="Tucao コンテンツ" v-model.trim="tarea"></textarea><br> <!-- @click="",クリックイベントを設定--> <button class="send" @click="sendCont()">公開</button> <時間> <h3>Tucao の返信:</h3> <!-- リスト データを走査 --> <div class="cont" v-for="リスト内のval" :key="val.name"> <div> <p>{{val.name}}</p><span>はこう言います:</span> <p>{{val.item} </p> <p class="del" @click="delCont(val)">削除</p> </div> </div> </div> </div> <script type="text/javascript"> 新しいVue({ el:"#app", //テンプレートデータを指定します:{ リスト:[ {"name":"beibei","item":"お母さん、焼き芋が食べたい"}, {"name":"dian","item":"食べる、大きな塊を食べる"}, ]、 uname:"", タリア:"", }, 方法:{ // 「公開」ボタンクリックイベント sendCont(){ // リストを作成します var item = {name:this.uname,item:this.tarea}; // リストの先頭に項目を追加する this.list.unshift(アイテム); // ユーザー ボックス、コンテンツ ボックスをクリア this.uname=""; this.tarea=""; }, // 最後の「削除」イベントに関するコメント delCont(val){ alert("本当に削除しますか?"); // リスト内の val のインデックスを検索します // value の項目/名前の値が val の項目/名前の値と等しい場合に value によって走査される要素 var ind = this.list.findIndex(value=>value.item===val.item); // リスト内の ind 番目の項目を削除します。this.list.splice(ind,1); } } }) </スクリプト> </本文> </html> 4. 以上です。皆さんの楽しい勉強を祈っています。さようなら。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 突然外部ネットワークからDockerにアクセスできなくなる問題の解決方法
Linux で最も一般的に使用される重要なユーティリティの 1 つである Sudo は、ほぼすべての...
Docker バージョン: [root@localhost gae_proxy]# docker バ...
楽観的ロック楽観的ロックは、主にデータ バージョン記録メカニズムに基づいて実装され、通常はデータベー...
MySQL ストアド プロシージャは、確かに、非常にまれな使用シナリオのように見えます。この問題は、...
導入以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに...
本格的な MySQL 最適化! MySQL のデータ量が少ない場合は最適化は不要です。データ量が多い...
1. チューニングの必要性 私は、どのように書けばいいのか本当に分からないので、共有するために最適...
ここで、アンカー ポイントを制御するいくつかの状況をまとめてみましょう。 1. 同じページ <...
目次ステップ1: CentOS 8でパッケージを更新するステップ2: CentOS 8にNginx ...
単一のテーブルをエクスポートするmysqldump -u ユーザー -p db名 テーブル名 >...
<br />英語アドレス: http://developer.yahoo.com/per...
例えば: <link rel="スタイルシート" href="h...
Shtml と asp は似ています。shtml という名前のファイルでは、asp の命令と同様に、...
インストールパス: /application/mysql-5.7.18 1. 事前準備MySQL 依...
目次JavaScript 改ざん防止オブジェクト1. 拡張不可能なオブジェクト2. 封印された物体3...