19.VUE学习之- v-for与computed结合功能筛选实例讲解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="hdcms">
    <li v-for="v in stus">
        {{v.name}} -  {{v.sex}}
    </li>
    {{type}}
    <input type="radio" v-model="type" value="girl"> 女孩
    <input type="radio" v-model="type" value="boy"> 男孩
</div>
<script>
    var app = new Vue({
        el: '#hdcms',
        computed:{
            stus(){
                if(this.type=='all'){
                    return this.user;
                }else{
                    //方法一:
//                     Type=this.type;  //这里的this指的是当前因点击的input里的value值而改变到的data里的type值
//                     return this.user.filter(function(v){  //括号里的v是循环data/user里的当前数组
//                     return v.sex ==Type;
//                    });

                    //方法二:可以直接把this的值传递给this.type.这里的this指的是当前因点击的input里的value值而改变到的data里的type值
                    return this.user.filter((v)=>{
                        //用改变后的data里的type值去逐条过滤user里的sex值是否匹配.匹配后才返回此条.
                        return v.sex ==this.type;
                    });
                }
            }
        },
        data: {
            type:'all',
            user:[
                {name:'小明',sex:'boy'},
                {name:'小强',sex:'boy'},
                {name:'小丽',sex:'girl'},
                {name:'小梅',sex:'girl'}
            ]
        }
    });
    </script>
</body>
</html>

效果:

19.VUE学习之- v-for与computed结合功能 筛选实例讲解

猜你喜欢

19.VUE学习之- v-for与computed结合功能筛选实例讲解