zoukankan      html  css  js  c++  java
  • 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.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>
    

    效果:


  • 相关阅读:
    oracle语法
    cin.clear()、cin.sync()
    Intellij Idea Spring Boot 热部署
    navicat_premium_x64最新版安装说明
    激活navicat premium12
    时间戳Unix和时间之间的转换
    排序算法-- 大总结
    The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
    final
    static
  • 原文地址:https://www.cnblogs.com/haima/p/10232624.html
Copyright © 2011-2022 走看看