이미지를 부착하고 클릭할때마다 이미지가 변경+토글이 되는 기능을 만들고 싶었다.

그럴때는 v-if로 바인딩해주면 되는데

<img v-if="isShowing" :src="IljungPlus" alt="일정접기" @click="isShowing = !isShowing">

data(){
    return{
      isShowing : true,
      IljungPlus : require('../assets/iljungm.gif'),
      IljungMinus : require('../assets/iljungp.gif')
    }
  },

로 적어준다.

isShowing은 항상 true이고 이미지를 클릭할때마다 isShowing의 상태가 같지 않으면 false로 변경되어서 토글기능을 만들어준다.

그래서 if로 바인딩 시킨뒤 src를 적어줘야하는데..

분명히 바인딩 전에 그냥 <img src="">로 하게 되면 경로가 맞는 경로인데

우선은 <img :src="이미지경로"> 를 적었더니 v-bind는 객체가 필요하다며 에러가 뜨길래 봤더니

<img :src=" '경로' ">로 안에 ‘ ‘작은따옴표를 넣어주어야했다.

근데 문제는 작은따옴표를 넣고 바인딩을하면 src를 아예 문자열로 인식하는지 이미지를 가져오지를 못한다!

그래서 결국에는 데이터에다 이미지 경로를 넣고 받아온뒤,

IljungPlus 이런식으로 경로를 바인딩해주었다.

이렇게 하니까 잘나오네