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 を応援していただければ幸いです。

以下もご興味があるかもしれません: