v-show 조건부 랜더링 v-show v-if는 조건이 거짓일 때 랜더링을 하지 않지만, v-show는 일단 랜더링을 하고 css의 display속성을 제어한다. display : none; => 전체를 랜더링 다 하고 화면만 가림 v-if 태그의 else 처리가 되지 않음 v-if는 v-show에 비해 랜더링을 위한 작업을 많이 해야한다. v-show는 화면이 나타난 이후 자주 토글될 때 사용한다. v-if는 화면을 만들 때 랜더링 제어를 할 경우 사용한다. 2022. 12. 28. v-on 이벤트 처리 https://www.w3schools.com/html/default.asp HTML Tutorial W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP 등을 잘 설명한 사이트 이다. v-on 메소드는 해당 이벤트태그에서 'on'을 제거하고 사용하면 된다. 간단한 이벤트 처리 버튼 버튼 data1 : data.. 2022. 12. 23. Vue.js DB 엔터값 줄바꿈 css style 태그로 초간단 출력하게 하기 프로젝트 작업 중, 데이터베이스에 insert 된 텍스트들의 엔터값이 적용되지 않고 출력되는 것을 발견했다. 이런 경우 간단한 스타일 태그로 처리 할 수 있다. 유용할 것 같아서 기록용으로 작성한다! style = "white-space:pre;" 참고 소스 : https://developer.mozilla.org/ko/docs/Web/CSS/white-space white-space - CSS: Cascading Style Sheets | MDN CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다. developer.mozilla.org 상기 사이트에 더 많고 자세한 태그들이 설명되어있다. 2022. 12. 21. v-bind + 이벤트 핸들링 정리잘하신 블로그 v-bind Vue.js에서 HTML을 구성하는 요소에 값을 설정 할 때 사용하는 지시자이다. 속성, CSS, form 등 다양한 요소들에 값을 설정할 수 있다. HTML 태그의 속성을 세팅할 때는 v-bind:속석명을 사용한다. v-bind는 생략 가능하다. 강의를 들으면서 따라하다가..... 같은 코드이고 Vue2.0 버전으로 스크립트 했음에도 불구하고, 작동하지 않는 메서드들이 있었다... 우선은 검색하다가 정리 잘하신 블로그를 찾아서 기록해둔다.. https://www.joinc.co.kr/w/man/12/vuejs/events 뷰 공식 한국 문서 돌려주세요.......... 2022. 12. 21. v-for 태그를 반복할 수 있다 {{a1}} {{idx}} : {{a1}} 추가 {{a2}} v-for 에서 methods 개념이 어려웠는데 조금씩 알 것 같다. HTML 삽입 미리보기할 수 없는 소스 2022. 12. 19. 이전 1 ··· 6 7 8 9 10 11 12 ··· 57 다음
