[Vue.js] v-show
웹/Vue.js2018. 11. 8. 20:12
v-show
간단한 설명
v-show : 조건에 따라 블록 표시를 on/off 하는 디렉티브입니다.
ex) 이메일 형식이 틀린 경우 붉은 색으로 뜨는 것에 사용할 수 있습니다.
코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-show</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id='app'> <!-- v-show : 조건에 따라 블록 표시를 on/off 하는 디렉티브 --> <!-- ex) 이메일 형식이 틀린 경우 붉은 색으로 뜨는 것 --> <input type="checkbox" v-model="cValue" value="0" name="cGroup"> check <p v-show="cValue"> <span>checked</span> </p> </div> <script> var app = new Vue({ el: '#app', data: { cValue : 0 } }) </script> </body> </html> | cs |
결과
'웹 > Vue.js' 카테고리의 다른 글
| [Vue.js] v-for (0) | 2018.11.08 |
|---|---|
| [Vue.js] v-if / v-else-if / v-else (0) | 2018.11.08 |
| [Vue.js] v-model (0) | 2018.11.08 |
| [Vue.js] v-html (0) | 2018.11.08 |
| [Vue.js] v-bind (0) | 2018.11.08 |
댓글()
