<!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. vivado2017.1和modelsim10.5联合仿真

    vivado2017.1和modelsim版本 vivado可在xilinx官网查询匹配的modelsim最低版本,下载modelsim前记得选用合适的版本号,如图 查询地址:https://www. ...

  2. BZOJ2339/LG3214 「HNOI2011」 卡农 组合数学

    问题描述 BZOJ2339 本题的一些心得 对于这种无序集合计数类问题,可以通过对方案数除以某个数的阶乘,使得无序化变为有序化. 设计DP方程时候,应该先有序的列出状态转移方程每一项的来源,并一项项推 ...

  3. python程序封装成exe流程

    在学习python的过程中,在IDE编写完成py项目,运行成功想要封装成exe,方便分享给不同的人即使别人没有安装python也可以使用. 封装的过程中遇到一些问题,记录一下,方便自己和他人查阅. 以 ...

  4. 转载-ThreadPoolExecutor里面4种拒绝策略（详细）

    原文链接:https://blog.csdn.net/wjs19930820/article/details/79849050 1 /** * 定义异步任务执行线程池 */ @Configuratio ...

  5. PHP 源码学习 | 变量类型数据结构

    前段时间因为项目需要,研究了一下在 Windows 系统下进行 PHP 扩展的开发,对于 PHP 扩展的开发并不是一件容易的事情(话又说回来了,会者不难,难者不会,关键是自己不会).我当时的需求,主要 ...

  6. MYSQL 高级语法

    1.高级建表和插入 使用creat 和select 进行建表操作,中间采用AS 标识符: CREATE TABLE new_table AS SELECT * FROM exist_table LIM ...

  7. idea创建maven的web项目

    前言 今天搭xfire的时候,我想对xfire进行一下测试,就想弄个web工程试试,发现网上写的很多没有用的,就自己写了一下.十分精简.也介绍了如何解决maven骨架建立项目非常慢的问题. 介绍 1. ...

  8. JQuery学习笔记（1）——选择器

    JQuery本质上还是JavaScript,是JavaScript的一个框架,可以让我们更简洁地去使用JavaScript 使用之前,记得在html头部引用JQuery 通过选择器获得JQuery对象 ...

  9. struts2增删改查

    1.导入相关的依赖:struts.自定义标签库 配置pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xm ...

  10. centos 7 搭建vsftp

    一.FTP简介 1.ftp 概述                                                FTP:(file  transfer  protocol文件传输协议) ...