<!doctype html>

<html lang="en">

<head id="head">

    <meta charset="UTF-8">

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <title>{{title}}</title>

</head>

<body>

<div id="ask"><!--vue不能控制body和html的标签-->

     <li v-for="v in stus">

        {{v.name}} ======> {{v.sex}}

     </li>

    <input type="radio" v-model="type" value="all" checked> 全部

    <input type="radio" v-model="type" value="boy" > 男孩

    <input type="radio" v-model="type" value="girl" > 女孩

</div>

<script>

    var vue = function (options){new Vue(options)};

    vue({

        el:'#head',

        data:{

            title:'Vue v-for操作与computed结合功能'

        }

    });

    var app = vue({

        //element

        el:'#ask',

        computed:{

            stus(){

                if(this.type == 'all'){

                    return this.user;

                }else{

                    /*es6写法 防止用不了this.type*/

                    return this.user.filter((v)=>{

                        return v.sex == this.type;

                    })

                }

            }

        },

        data:{

            type:'all',

            user:[

                {name:'小刘',sex:'boy'},

                {name:'小王',sex:'boy'},

                {name:'小花',sex:'girl'},

                {name:'小芳',sex:'girl'},

            ]

        }

    });

</script>

</body>

</html>

Vue v-for操作与computed结合功能的更多相关文章

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

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

  2. Vue教程：计算属性computed与侦听器watch（三）

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

  3. Vue 基础自查——watch、computed和methods的区别

    1 前言 创建一个Vue实例时,可以传入一个选项对象 const vm = new Vue({ data: { msg: 'hello' }, computed: {}, methods: {}, w ...

  4. vue 中 直接操作 cookie 及 如何使用工具 js-cookie

    转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...

  5. PHP操作实现一个多功能购物网站

    PHP操作实现一个多功能购物网站 一.需要实现的页面: Index.aspx:浏览商品页面,显示商品列表,用户可以点击“加入购物车“. ViewCart.aspx:查看购物车页面,显示已购买的商品信息 ...

  6. 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表

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

  7. Vue cmd命令操作

    1.安装node(安装到电脑中,不同项目不需重复安装) 安装nodejs(如果不是在C:则需要配环境变量)2.打开cmd C:创建一个文件夹(名字不要用node) 1.进入该文件夹 2.node -v ...

  8. vue.js 中 data, prop, computed, method，watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  9. 怎样理解 Vue 中的计算属性 computed 和 methods ?

    需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...

随机推荐

  1. C#开发BIMFACE系列26 服务端API之获取模型数据11：获取单个面积分区信息

    系列目录     [已更新最新开发文章,点击查看详细] 在<C#开发BIMFACE系列25 服务端API之获取模型数据9:获取楼层对应面积分区列表>一文中介绍了如何获取单个模型中单个楼层包 ...

  2. GCC预编译宏查看

    编译调试代码时,总是遇到要使用编译器预编译宏进行跨平台编译. gcc -E -dM -</dev/null 编译器版本 Thread model: posix gcc version 5.4.0 ...

  3. centos7下mysql5.7的安装与配置

    centos7下MySQL5.7的安装与配置 下载 下载地址 根据系统和版本选择红框中的四个RPM包下载即可,然后放到centos7系统中的/opt目录下,等待稍后安装. 安装前的准备 1. 检查系统 ...

  4. SEH hook 的一种方法

    Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html 技术学习来源:火哥(QQ:471194425) 该方法的一些原理暂 ...

  5. 用 Python 自动监测 GitHub 项目更新

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: GitPython PS:如有需要Python学习资料的小伙伴可以加 ...

  6. python基础—条件语句

    一.Python基础 1.第一句python print('hello,world') Q: 后缀名可以任意? A:  导入模块时,如果不是.py后缀,会出错. 2.两种执行的方式: -python解 ...

  7. springcloud vue 微服务分布式 activiti工作流 前后分离 集成代码生成器 shiro权限

    1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...

  8. Spring 注解配置Bean

    一.使用注解配置Bean 1.注解 在类定义.方法定义.成员变量定义前使用.其简化<bean>标签,功能同<bean>标签.格式为: @注解标记名. 2.组件扫描 Spring ...

  9. 装上这 10 个插件，你就是这条 Gai 最靓的仔！

    直奔主题,给大家推荐 10 个好用的插件. 1.「Adblock Plus」 世界排名第一的免费广告拦截程序 ​ 相信大家都有这样的体验,进某个论坛.新闻或者购物网站,广告满天飞,关掉之后还时不时弹出 ...

  10. Unity Pixel 人物设计(1)

    草稿: 目前进度: