iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
自我挑戰組

新手初探 Vue系列 第 5

鐵人賽Day05 - v-for & v-if

  • 分享至 

  • xImage
  •  

這篇要來介紹 v-forv-if 這兩個指令
相當於 JavaScriptfor 迴圈跟 if 判斷式
一樣先把 Vue 的基本架構寫出來:

<div id="app">
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            
        }
    })
</script>

接著我們在 data 內新增 list 變數放置一個陣列

<script>
    var app = new Vue({
        el: '#app',
        data: {
            list: [
                {
                    name: '小明',
                    age: 16
                },
                {
                    name: '小華',
                    age: 38
                },
                {
                    name: '花花',
                    age: 24
                }
            ]
        }
    })
</script>

接著我們使用 v-for 這個指令逐一把每筆資料呈現在頁面上

<div id="app">
    <ul>
        <li v-for="item in list">
            {{ item.name }} 年齡是 {{ item.age }} 歲
        </li>
    </ul>
</div>

上述的 item 為自定義的變數,接著採用跟讀取物件屬性的方式搭配雙大括號放置在 <li>
這時候頁面上就會把所有資料都渲染上去
假設我們想要針對資料來做一些篩選,這時候就可以搭配 v-if 指令來做使用
假設我們想要篩選出年齡小於 25 歲的人
這時候加上 v-if 判斷:

<div id="app">
    <ul>
        <li v-for="item in list" v-if="item.age < 25">
            {{ item.name }} 年齡是 {{ item.age }} 歲
        </li>
    </ul>
</div>

把判斷式寫在 v-if 內,資料即可做篩選

額外小補充,如果我們想在每筆資料上加上索引,則可以這樣寫:

<div id="app">
    <ul>
        <li v-for="(item,index) in list">
            {{ index }} {{ item.name }} 年齡是 {{ item.age }} 歲
        </li>
    </ul>
</div>

在自定義的變數加上 index 並渲染到標籤內即可。


上一篇
鐵人賽Day04 - v-bind 動態屬性指令
下一篇
鐵人賽Day06 - v-on 綁定頁面行為
系列文
新手初探 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言