v-if 和 v-for 组合

当 v-if 和 v-for 出现在一起时，v-for 优先级更高。也就是说，会先遍历，再判断条件。

<div id="app">
        <ul>
            <li v-for="user,index in users" :key="index"  v-if="user.gender == '女'">
                {{index}} - {{user.name}} - {{user.gender}} - {{user.age}}
                <div v-for="(value,key,index) in user">{{index}}：{{key}}=>{{value}}</div>
            </li>       
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                users: [
                    { name: '张三', gender: '女', age: 21 },
                    { name: '李四', gender: '男', age: 18 },
                    { name: '王五', gender: '女', age: 24 },
                    { name: '赵六', gender: '女', age: 18 },
                    { name: '陈七', gender: '女', age: 25 }
                ]
            },
        })
    </script>