<!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. Luogu P5368 [PKUSC2018]真实排名

    老年选手只会做SB题了(还调了好久) 很容易想到分类讨论,按第\(i\)个人有没有翻倍来算 若\(a_i\)未翻倍,显然此时将\([0,\lceil \frac{a_i}{2}\rceil)\)的数和 ...

  2. 我的前端架构(jquery)汇总

    目录 我的前端架构之一--页面作用域 我的前端架构之二--统一扩展Js方法 我的前端架构之三 -- 页面规范 我的前端架构之四 -- UI控件 我的前端架构之五 -- 一些方案实现 判断对象是否是 e ...

  3. Mybatis关联查询之一

    MyBatis的关联查询之一对多,多对一 在关系型数据库中,我们经常要处理一对多,多对一和多对多的关系. 一对多,多对一 一.entity 实体类 public class SmbmsRole { p ...

  4. 为什么 Java 不是纯面向对象语言？

    什么是纯面向对象语言? 纯面向对象语言或完全面向对象语言是指完全面向对象的语言,它支持或具有将程序内的所有内容视为对象的功能.它不支持原始数据类型(如 int,char,float,bool 等).编 ...

  5. IT兄弟连 Java语法教程 流程控制语句 分支结构语句2

    2  if-else条件语句 if-else语句的完整形式如下: if(判断条件){ A代码块(判断条件的值为true,执行) }else{ B代码块(判断条件的值为false,执行) } 当然,如果 ...

  6. IT兄弟连 Java语法教程 数据类型2

    整型 Java定义了4种整数类型:byte.short.int和long.所有这些类型都是有符号的.正或负的整数.Java不支持无符号的.只是正值的整数.许多其它计算机语言同时支持有符号和无符号整数. ...

  7. 巧妙利用selenium中的JS操作来处理特殊的文本框

    在使用selenium对页面进行相关操作时,有时候会遇到以下三种情况: 1.日期框:无法直接输入文本,必须要选择某一天的日期并点击才会填入文本框: 2.检索框:可以直接输入文本,但必须要点击根据输入的 ...

  8. hyper-v Centos7 网卡配置无效

    环境: Win 10 Hyper-v 安装虚拟机:Centos 7 遇到问题: 网络配置无效,使用命令“ip addr” 网卡没有出现在列表中,显示了一个奇怪的网卡名字如“enp0s010f”,配置文 ...

  9. oracle里面查询重复数据的方法

    一张person表,有id和name的两个字段,id是唯一的不允许重复,id相同则认为是重复的记录. select id from group by id having count(*) > 1 ...

  10. 使用ADO.NET实体数据模型

    前景:要操作的数据表必须添加主键(方式:进入数据库-->数据表名-->设计-->列名右键-->设置主键) 可在服务器资源管理器中查看是否设置了主键(主键会有一把钥匙的图样) 1 ...