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

最新推荐文章于 2024-01-31 19:12:46 发布

weixin_30466953

最新推荐文章于 2024-01-31 19:12:46 发布

阅读量831

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/haima/p/10232624.html

版权

<!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.type的值传递给filter里.这里的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>

效果:

转载于:https://www.cnblogs.com/haima/p/10232624.html

weixin_30466953

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
19.VUE学习之- v-for与computed结合功能筛选实例讲解

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">  <sc...
复制链接

扫一扫