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.运行代码：

• 成功逮住坤坤！！！