vue btn

[Vue.js] 조건부 렌더링과 버튼 활성화하기

v-show 조건부 디렉티브를 이용하여, vue 에서 페이지가 번호가 1을 벗어나면, 해당 설정 버튼 값을 제어하지 못하도록 하려고 한다. v-show는 조건부 디렉티브로서, 반환 값이 true와 false 값을 가진다. 다른 값은 들어갈 수 없다. true : 화면이 보여짐 false: 화면이 안보임 *하지만, 개발자 모드로 보면, 버튼이 삭제되지 않는 것을 확인할 수 있다. 대신, 값이 false가 되면, span 태그 위에 있는 ::before 이 사라진다. 사용전 사용후 처음에, this 를 잘 못 사용해서 계속 버튼이 활성화가 안되었는데, 이유를 알았다. 사실, Vue.js 에서는 조건문을 이용하여 조건부 렌더링을 할 수 있다. v-if, v-else, v-else-if 구문이 있다. 하지만, ..

[Vue.js] props 이용하기

vue의 문법을 익히려면 여러가지 유스케이스를 직접 다뤄봐야 한다. props를 이용하여, 자식 컴포넌트의 구조를 재활용이 가능한 구조를 보이고, 속성을 어떤식으로 보내는지 살펴보는게 이번 글에서의 핵심이다. 또한 부모 컴포넌트에서는 자기 데이터를 어떤식으로 바인딩하는지 :(콜론) 을 어떻게 사용하는지 확인해보자. App.vue 1. 컴포넌트 파일을 불러올때는 import / from 을 활용하도록 한다. 2. 내부적으로 사용하려는 데이터는 data 안에 넣어두고, :color 이런식으로 바인딩해서 사용하도록 한다. import MyBtn1 from './components/MyBtn1.vue' export default { components: { MyBtn1 }, data () { return { c..