Vue click 이벤트핸들러

Vue

끈끈 2023. 5. 4. 01:01

HTML 클릭시 코드 실행

javascript:

<div>    
    <h4>{{products[0]}}</h4>
    <p>50 만원</p>
    <button onclick="자바스크립트">허위매물신고</button> <span>신고수 : 0</span>
</div>

버튼을 누르면 숫자를 찾아서 +1

+1 된 것을 HTML에 반영시키기

javascript의 함수:

function 어쩌구() {
    console.log("안녕")
    console.log("안녕")
    console.log("안녕")
}

긴 코드를 짧게 줄이기 위해 사용

vue:

<div>    
    <h4>{{products[0]}}</h4>
    <p>50 만원</p>
    <button v-on:click="신고수++">허위매물신고</button> <span>신고수 : 0</span>
</div>

v-on:click="신고수++"
@click="신고수 += 1"

둘은 같다

버튼을 누르면 관련된 데이터만 +1

(데이터가 변하면 HTML에 바로 반영되기 때문)

vue의 함수 위치는 data 뒤에

함수 안에서 데이터 쓸 땐 this.데이터명

methods : {
    increase(){
    	this.신고수 += 1
    },
},

참고