Vue select value 가져오기 @change / event.target.value vue.js 함수에서 select value를 쉽게 가져오는 방법을 기록해둔다. 월요일 화요일 수요일 목요일 금요일 토요일 일요일 /* 0215 검색요일 설정 */ theWeek : function(){ var vm = this; console.log(event.target.value); var week = event.target.value; alert(week); }, 이렇게만 해두면 console.log 와 변수 week에 value값이 담긴다. 2023. 2. 15. [Vue.js] 새로고침 / 뒤로가기 방지 및 확인 창 / 사이트를 새로고침하시겠습니까? 사용자가 입력하는 화면에서 실수로 뒤로가기/새로고침을 눌렀을 때 사용자 편의성을 위해 확인창을 한번 실행해준다. 자바스크립트로 하는 방법도 있지만, 나는 Vue.js로 작업하고 있는 페이지여서 Vue.js로 만들었다. mounted() { window.addEventListener('beforeunload', this.unLoadEvent); }, beforeUnmount() { window.removeEventListener('beforeunload', this.unLoadEvent); }, methods: { unLoadEvent: function (event) { if (this.isLeaveSite) return; event.preventDefault(); event.returnValue = ''.. 2023. 2. 8. 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. 이전 1 2 3 다음
