본문 바로가기

전체 글291

v-for using object v-for에서 반복할 대상이 객체인 경우에는 키별로 반복이 된다. 배열을 쓸 때와 약간 다르므로 문법을 비교해보자. 배열 같은 경우는 push나 pop같은 것을 쓰면 데이터 변경시 반응성을 가진다. 하지만 객체 obj는 생성될 때 name 과 age 속성만 있었으므로 다른 속성을 동적으로 추가해도 반응성을 가지지 못한다. 이에 대한 해결 방법은 vm.obj 의 참조 값에 새로운 객체를 다시 할당시키는 방법이다. gender: male 속성을 추가해보자. vm.obj = Object.assign({}, vm.obj, { gender: male} ) 위 코드를 통해 obj는 새로운 객체를 참조하게 되고 이 새로운 객체는 만들어 질 때 기존 obj 속성들과 gender 속성을 가지므로 모두 반응성을 가진다. .. 2020. 7. 9.
v-for 반응성 유지 v-for에 사용된 배열이 변경될 수 있는데 이것이 반응성을 가지기 위해서는 push나 pop같은 특정 메소드를 사용해야 반응성을 가진다. 아래 예시에서 pushTodo()를 this.todos[3] = {title:'야식 먹기'} 로 하면 데이터는 변경이 되지만 반응성을 갖지 못해서 html에 반영이 안된다. 따라서 공식 사이트에서 말하는 메소드를 사용하여야 한다. 2020. 7. 9.
v-show vs v-if Vue에서 정의된 show data에 따라서 박스를 토글시키는 예제이다. v-show와 v-if의 값으로 오는 것이 true일 경우에는 동일하게 html 태그가 존재한다. false일 경우에는 화면에는 둘다 보이지 않게 될 것이다. 하지만 false일 때 html 코드가 다르다. 아래 코드를 보면 하나는 아예 코드가 표시되지 않는다. 바로 v-if가 화면에서도 사라지면서 코드 상에서도 사라진다. 따라서 토글이 자주 사용된다면 v-if보다는 v-show가 나은 선택이다. 반대로 초기 렌더링에는 필요 없다가 특정 조건 이후에 계속 살아있게 하려면 v-show가 좋을 것이다. 2020. 7. 9.
v-if v-if의 값으로 오는 수식이 true일 경우 해당 엘리멘트가 사용된다. 그렇지 않은 엘리멘트는 렌더링 되지 않는다. 2020. 7. 8.

티스토리툴바