1023 | VUE 에서 메서드 바인딩 & 불러온 List 값 바인딩하기

✅ 메서드 바인드

 

 

v-on:click 대신 @click을 사용

Modifiers - 제한자

.left : 클릭할때 왼쪽버튼만 적용

.prevent : e.preventDefault(); 를 대체하는 것 (DOM 객체를 안쓰기위함)

<fieldset>

                                <legend class="d:none">이름 검색</legend>

                                <input type="text" placeholder="메뉴 검색" v-model="query">

                                <button type="submit" class="icon icon-find"

                                    @click.prevent.once="findHandler">검색</button>

                            </fieldset>

이렇게 계속 이어붙여가며 사용되며, once를 붙이면 한번만 클릭됨

 

 

#️⃣ vue로 for문 넣기

 

Built-in Directives | Vue.js

메소드에서 반환된 값을 모델 (data)안에 넣어서 반영시킨다

👉좌측에선 바인딩만 하고 오른쪽에선 모델만 준비한다.!

 

 

Built-in Directives | Vue.js

이렇게하면 기존 단어가 덮어씌워지므로 경고가 함꼐 나옴

<div class="content">
<!-classappend처럼 기존 클래스에 조건에 따라 추가할 수 있다--->
    <section class="menu-card" :class="{soldout:m.amount==0}" v-for="m in list">
        <h1>
            <a class="heading-3" :href="'detail.html?'+m.id">{{m.korName}}</a>
        </h1>
        <h2>{{m.engName}}</h2>
        <div><span>{{m.price}}</span>원<span>SOLD OUT</span></div>
        <div class="img-block">
            <a :href="'detail.html?id='+m.id"><img :src="'/image/menu/product'+m.img"></a>
        </div>
        <div class="like-block d:flex justify-content:flex-end">
            <a class="icon icon-heart-fill icon-color:base-4" href="">{{m.isLike}}</a>
            <span class="font-weight:bold ml:1">{{m.likeCount}}</span>
        </div>
        <div class="pay-block d:flex">
            <a href="">담기</a>
            <a>주문하기</a>
        </div>
    </section>
</div>

 

✔️ 클래스를 조건에 따라 선택적으로 반영할때

- 꼭 배타적으로 넣을때 뿐만 아니라 여러개를 넣고 싶을때 사용

<div class="like-block d:flex justify-content:flex-end">
    <a class="icon icon-color:base-4"
        :class="{'icon-heart':m.isLike==false,'icon-heart-fill':m.isLike==true}"
        href="">{{m.isLike}}</a>
    <span class="font-weight:bold ml:1">{{m.likeCount}}</span>
</div>

<!--일반 언어 문법처럼 느낌표로도 true,false 적용 가능-->

<div class="like-block d:flex justify-content:flex-end">
    <a class="icon icon-color:base-4"
        :class="{'icon-heart':!m.isLike,'icon-heart-fill':m.isLike}"
        href="">{{m.isLike}}</a>
    <span class="font-weight:bold ml:1">{{m.likeCount}}</span>
</div>