[Vue.js] v-if / v-else-if / v-else
웹/Vue.js2018. 11. 8. 20:04
v-if / v-else-if / v-else
간단한 설명
보통 if - else if - else 와 동일합니다.
코드
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 30 | <!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-if-else</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id='app'> <input type="radio" v-model="rValue" value="0" name="rGroup"> v-if <br> <input type="radio" v-model="rValue" value="1" name="rGroup"> v-else-if <br> <input type="radio" v-model="rValue" value="2" name="rGroup"> v-else <p> <span v-if="rValue == 0"> v-if 입니다. </span> <span v-else-if="rValue == 1"> v-else-if 입니다. </span> <span v-else> v-else 입니다. </span> </p> </div> <script> var app = new Vue({ el: '#app', data: { rValue : 1, } }) </script> </body> </html> | cs |
결과
'웹 > Vue.js' 카테고리의 다른 글
| [Vue.js] v-for (0) | 2018.11.08 |
|---|---|
| [Vue.js] v-show (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 |
댓글()
