## 條件與循環 [TOC] >[success] #### 知識概要 * v-if 指令 * v-for 指令 >[info] #### v-if 指令使用 ~~~html <div id="app-3"> <p v-if="seen">現在你看到我了</p> </div> ~~~ ~~~javascript var app3 = new Vue({ el: '#app-3', data: { seen: true } }) ~~~ >[info] #### 多if的使用 v-if v-if-else v-else ~~~ <div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </div> <script> new Vue({ el: '#app', data: { type: 'C' } }) </script> ~~~ >[info] #### v-show的使用 ~~~ <div id="app"> <h1 v-show="ok">Hello!</h1> </div> <script> new Vue({ el: '#app', data: { ok: true } }) </script> ~~~ >[info] #### v-for 指令使用 ~~~ <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> ~~~ ~~~ var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '學習 JavaScript' }, { text: '學習 Vue' }, { text: '整個牛項目' } ] } })v ~~~ >[info] #### v-for 處理多維數組 ~~~ <ul id="app1"> <li v-for="(items, key) in list"> {{key}} <ol v-for="(item, ikey) in items"> <li> <a v-bind:href="item.url">{{item.name}}</a> </li> </ol> </li> </ul> ~~~ ~~~ var json = { 1 : [{name:'法家', url:'http://fajia.cc'}], 2 : [{name:'儒家', url:'http://rujia.cc'}], 3 : [{name:'墨家', url:'http://mojia.cc'}] }; var app1 = new Vue({ el:'#app1', data:{ list:json } }); ~~~