@イベント

JSでアクティビティを実行する場合は、onclikに必要なメソッドを追加して操作します.Vueでは、@を追加し、必要なイベントを追加できます.次のコードは、虚偽の商品申告ボタンを作成してクリックすると、その商品の申告数が1つずつ増加するコードです.
まず、1件あたりの数が3つなので、申告数のデータを並べてみました.その後,通報を増やす関数を作成し,クリック活動に掛けた.Vueで関数を作成する場合は、methodと宣言し、その中で関数を作成するだけです.その後、初期化ボタンを押して、その申告数の個数を0に初期化し、非常に簡単な関数練習codelを作成しました.

<div v-for="(product,i) in products" :key="i">    
     ...
    <p>신고수 : {{신고수[i]}} </p>
    <button style="cursor:pointer; margin-right : 20px" @click="신고늘리기(i)">허위매물신고</button>
    <button style="cursor:pointer" @click="신고수[i]=0">초기화</button> 
</div>

...

export default {
  name: 'App',
  data(){
    return{
      ...
      신고수 : [0,0,0],
      ...
    }
  },

  methods : {
    신고늘리기(i) {
      this.신고수[i]++;
    }
  },
  ...
}

次に、モデルウィンドウの作成とモデルウィンドウの再生のアクティビティを練習します.簡単に模写をした.次のコードのV-ifはthymeleafのif構文と同じです.必要なif文「」に条件がある場合、divが露出します.逆に、条件に合わなければ露出しません.

<div class="black-bg" v-if="modal== true">
    <div class="white-bg">
      <span @click="modal=false" style="float : right; cursor:pointer;">x</span>
      <h4>상세페이지</h4>
      <p>상세페이지 내용</p>
    </div>
  </div>

...

<style>
body{
  margin: 0;
}
div {
  box-sizing: border-box;
}
.black-bg {
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  position: fixed; padding: 20px;
}
.white-bg{
  widows: 100%; background: white;
  border-radius: 8px;
  padding: 20px;

}

...

</style>

Import, Export

実際の作業ではapiサーバから必要なデータを抽出して書き込むことがよくあります.この点を練習するために、仮想的なjson形式のデータを受け取って、インポート、エクスポートの練習を試みたと思います.
まず仮想データです.これらのデータを組み合わせてdataと名付けます.そしてrealdatajsファイルに保存します.その後、他のjsでもこのデータを使用できるようにするには、exportを提供する必要がある.コードの一番下にはexport default roomDataと書いてあります.これによりdataという変数が除外されます!意味は.その後、関連データを書いたjsにimport roomData from ‘./경로/파일명.js’と書いて使えます.
1つ以上の変数をエクスポートする場合は、export {data1, data2}と書けばよい.あとimportでもimport {data1, data2} from './경로/파일명.js'と書いて使えます.
このときvueはimport変数を使用しないとエラーになります!

var roomData =  [{
    id : 0,
    title: "Sinrim station 30 meters away",
    image: "https://codingapple1.github.io/vue/room0.jpg",
    content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공",
    price: 340000
    },
    {
    id : 1,
    title: "Changdong Aurora Bedroom(Queen-size)",
    image: "https://codingapple1.github.io/vue/room1.jpg",
    content: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능",
    price: 450000
    },

    ...

    {
    id : 5,
    title: "Banziha One Room",
    image: "https://codingapple1.github.io/vue/room5.jpg",
    content: "반지하 원룸입니다. 비올 때 물가끔 새는거 빼면 좋아요",
    price: 370000
  }];

  export default roomData ;

上のスクリプトを下のスクリプトにインポートします.対応するroomDataをインポートし、divに対応するimport値を適用します.for文を返し、対応するパラメータ値を取り出してviewに送信します.

<div v-for="(product,i) in rooms" :key="i">    
    <img class="romm-img" :src="product.image">
    <h4 @click="modal=true" style="cursor:pointer">{{product.title}}</h4>
    <h4>{{product.content}}</h4>
    <h4>가격 : {{product.price}}원</h4>
    <p>신고수 : {{신고수[i]}} </p>
    <button style="cursor:pointer; margin-right : 20px" @click="신고늘리기(i)">허위매물신고</button>
    <button style="cursor:pointer" @click="신고수[i]=0">초기화</button>
</div>

...

<script>
import roomData from './realdata.js';

export default {
  name: 'App',
  data(){
    return{
      rooms : roomData,
...
	}
}
</script>

注意:https://codingapple.com/unit/vue-data-import-export/?id=139