Vue學習筆記10- v-if和v-for結合

前言：

我們可以将v-for周遊出來的内容，使用v-if進行篩選。

1.建立vue執行個體：

• 我們等下就把坤坤給我揪出來

const app = new Vue({
        el: "#app",    //根據名稱操作div,作用域隻在該div
        data: {
            users: [          //建立數組
                {name: '柳岩',sex: '女',age: 21},
                {name: '範冰冰',sex: '女',age: 20},
                {name: '楊幂',sex: '女',age: 19},
                {name: '坤坤',sex: '男',age: 18}
            ]
        },
        methods:{
        },
    });
           

2.html模闆代碼:

• 由于v-for執行順序比v-if優先，是以我們可以使用周遊後被指派的user來篩選。

<div id="app">
        <ul>
            <li v-if="user.name=='坤坤'" v-for="(user,index) in users":key="index">{{index+1}}.{{user.name}}-{{user.sex}}-{{user.age}}</li>
        </ul>
    </div>
           

3.運作代碼：

• 成功逮住坤坤！！！