<!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>

效果:



19.VUE学习之- v-for与computed结合功能 筛选实例讲解的更多相关文章

  1. 43_2.VUE学习之--不使用组件computed计算属性超简单的实现美团购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue学习3：计算属性computed与监听器

    下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. Vue学习笔记：methods、computed、watch的区别

    自:https://www.jb51.net/article/120073.htm 首先要说,methods,watch和computed都是以函数为基础的,但各自却都不同 而从作用机制和性质上看,m ...

  4. vue学习笔记(五)：对于vuex的理解 + 简单实例

    优点:通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护.使用vuex来引入外部状态管理,将业务逻辑切分到组件外,可以避免重复的从服务端抓取数据. 详情请参考官 ...

  5. Dubbo学习总结（1）——Dubbo入门基础与实例讲解

    Dubbo是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000,000+次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点.Dubbo是一个分布式服务框架,致力于 ...

  6. VUE学习之计算属性computed

    计算属性:computed 先看一下官网的说法 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="ex ...

  7. Vue学习看这篇就够

    Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...

  8. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  9. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

随机推荐

  1. oracle 中的null与''

    1.先看看Null与''在oracle中的表现 C:\Users\zen>sqlplus hr/hr SQL Production :: Copyright (c) , , Oracle. Al ...

  2. 面试大全之JVM篇

    JVM 内存模型以及分区,需要详细到每个区放什么. JVM 分为堆区和栈区,还有方法区,初始化的对象放在堆里面,引用放在栈里面,class类信息常量池(static常量和static变量)等放在方法区 ...

  3. net start命令发生系统错误5和错误1058的解决方法

    net start命令用于开启服务,格式为:net start [服务名](与之对应的"net stop [服务名]"为关闭服务命令) 5是没有管理员权限,右键管理员即可 1058 ...

  4. IO多路复用丶基于IO多路复用+socket实现并发请求丶协程

    一丶IO多路复用 IO多路复用指:通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作 IO多路复用作用: 检测多个socket是否已经发生变 ...

  5. 数学建模大赛-NO.1

    数学建模大赛-NO.1   论文精析 近期,在网上各种的收罗,张开了各式各样的捕抓.哈哈… .终于,在一个不经意之间发现了一个巨大无比的宝藏式的网站,此网站网址为:http://cjsxjm.gzsi ...

  6. androidStudio修改包名 Android 如何修改包名（同一个手机可以跑2个eros 项目）。

    修改applicationId(gradle.properties). 2.即时同步更新过去,否则不报错

  7. Vue打包后页面出现cannot get

    学习Vue有大半个月了,然而遇到了不少坑,完全没有高手们那么容易,中间有不少值得记录下的东东,回头好好理理.先理下今天的: Vue打包命令简单啊,直接在命令行输入:npm run build 然而没一 ...

  8. CSS文档优化

    首先了解下CSS的渲染逻辑,它是从标记的最后一位开始搜索的,例如:.myclass li a,首选它会遍历所有的<a>,然后看哪些<a>之前有<li>,然后再看哪些 ...

  9. SVG矢量图【转】

    var iconArray=[ //'circle', //实心圆 //'rect', //矩形 //'roundRect', //圆角矩形 //'triangle', //三角形 //'diamon ...

  10. linux 链接的使用 创建和删除符号连接

    1 . 使用方式 :ln [option] source_file dist_file                     -f 建立时,将同档案名删除.                     ...