<!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. 【Java】String的首尾去空和判空

    去除字符串首尾空白字符:包括\t,\r,\n及" ": //去除字符串首尾空白字符:包括\t,\r,\n及" ": System.out.println(&qu ...

  2. HDUNumber Sequence（KMP）

    传送门 题目大意:b在a第一次出现的位置 题解:KMP 代码: #include<iostream> #include<cstdio> #include<cstring& ...

  3. 如何将Excel表批量赋值到ArcGIS属性表

    情景再现 现需要将Excel表信息批量赋值(不是挂接)到Shp文件的属性表,两张表的字段.记录数一模一样,至于为什么会出现这样的问题,咱也不敢问,只有想个法子把它搞定! 原始的Excel信息表共57列 ...

  4. JS实现网站楼层导航效果

     壹 ❀ 引 我在angularjs中使用锚点这篇文章中,踩坑并简单实现了楼层导航中点击小图标跳转到对应楼层的功能:但对于楼层导航而言,还有个重要的功能就是,随着滚动条滚动,达到某层时得同步点亮楼层导 ...

  5. ES5提取公共变量

    在ES5中,请求地址前缀等需要作为公共变量提出. 则需在common.js写上 Object.defineProperty(window,'base',{ value:"http://xx. ...

  6. javascript在数组的循环中删除元素

    在开发JavaScript应用的过程中,经常会遇到在循环中移除指定元素的需求. 按照常规的思路,就是对数组进行一个for循环,然后在循环里面进行if判断,在判断中删除掉指定元素即可. 但是实际情况往往 ...

  7. 通过Desktop.ini设置文件夹备注以及图标

    1.新建一个文件夹temp,进入此文件夹,建立desktop.ini文件,编辑内容为: ; 文件夹图标 [.ShellClassInfo] ;设置文件夹的备注 InfoTip=this is temp ...

  8. Java 构造结构私有化

    Java 构造结构私有化 单例设计模式:(Singleton) 在一般情况下,一个类只有通过产生对象之后才可以操作这个类. class Singleton { public void print() ...

  9. 环信即时通讯在工程中的安装——Nusen_Liu

    即时通讯-环信 准备 1.下载SDK http://www.easemob.com/download 2.证书下载上传 后期发送消息 需要推送发送的内容 http://docs.easemob.com ...

  10. UISlider增加触动区域

    - (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value { rect.origin. ...