Vueはシンプルなコメント機能を実装します

Vueはシンプルなコメント機能を実装します

この記事では、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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueはコメント機能を実装する
  • Vueは記事のコメントと返信リストを実装します
  • VUE+Javaでコメント返信機能を実装
  • コメントエリア機能を実現するVueコンポーネント
  • コメントリストを実現するVue開発
  • Vueはコメントリストを実装する
  • Vueはコメントリスト機能を実装する
  • コメント機能付きの静的ブログを構築するためのVuepressの実装
  • Vue.jsは記事コメントと返信コメント機能を実装します
  • Vueコンポーネントはコメント機能を実装します

<<:  突然外部ネットワークからDockerにアクセスできなくなる問題の解決方法

>>:  HTMLタグIDは変数にできる

推薦する

Linux が Sudo 権限昇格の脆弱性を公開、どのユーザーでも root コマンドを実行可能

Linux で最も一般的に使用される重要なユーティリティの 1 つである Sudo は、ほぼすべての...

MySQLのさまざまなロックの概念的理解

楽観的ロック楽観的ロックは、主にデータ バージョン記録メカニズムに基づいて実装され、通常はデータベー...

MySQL ストアド プロシージャの権限の問題の概要

MySQL ストアド プロシージャは、確かに、非常にまれな使用シナリオのように見えます。この問題は、...

JSはビデオの再生速度を制御するための簡単なサンプルコードを実装します

導入以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに...

MySQL ビッグデータ クエリ最適化エクスペリエンスの共有 (推奨)

本格的な MySQL 最適化! MySQL のデータ量が少ない場合は最適化は不要です。データ量が多い...

Nginx の高同時実行最適化の実践

1. チューニングの必要性​ 私は、どのように書けばいいのか本当に分からないので、共有するために最適...

HTML でのアンカーポイントの使用_PowerNode Java アカデミー

ここで、アンカー ポイントを制御するいくつかの状況をまとめてみましょう。 1. 同じページ <...

CentOS 8.1 で LEMP (Linux+Nginx+MySQL+PHP) 環境を構築する (チュートリアルの詳細)

目次ステップ1: CentOS 8でパッケージを更新するステップ2: CentOS 8にNginx ...

MySQL 全体または単一のテーブルデータのエクスポート

単一のテーブルをエクスポートするmysqldump -u ユーザー -p db名 テーブル名 >...

shtmlとhtmlの違い

Shtml と asp は似ています。shtml という名前のファイルでは、asp の命令と同様に、...

JavaScript 改ざん防止オブジェクトの使用例

目次JavaScript 改ざん防止オブジェクト1. 拡張不可能なオブジェクト2. 封印された物体3...