<!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. js a 标签 通过download 实现下载功能

    download 属性规定被下载的超链接目标. 在 <a> 标签中必须设置 href 属性. 该属性也可以设置一个值来规定下载文件的名称.所允许的值没有限制,浏览器将自动检测正确的文件扩展 ...

  2. centos--该虚拟机似乎正在使用中。 如果该虚拟机未在使用，请按“获取所有权(T)”按钮获取它的所有权。否则，请按“取消(C)”按钮以防损坏。

    centos非正常关机,导致无法正常启动的问题 该虚拟机似乎正在使用中. 如果该虚拟机未在使用,请按“获取所有权(T)”按钮获取它的所有权.否则,请按“取消(C)”按钮以防损坏. 解决方案: 1. 找 ...

  3. python解释器和环境安装

    现在最新的是python3.7下载好安装包:python-3.7.0-amd64.exe下载地址:https://www.python.org/getit/ 选择3.7.0下载 选择一款适合自己的编译 ...

  4. 立足于运维与监控的前端框架 NoahV

    NoahV是一个致力于解决中后台前端效率问题的前端框架,立足于运维和监控的应用场景,使用当前前端最新的技术栈并结合团队在项目开发中的最佳实践从而推出的前端开发框架. NoahV提供的功能覆盖了从开发到 ...

  5. 05Shell循环语句

    循环语句 for 语法结构 for 变量名 [ in 取值列表 ] do 循环体 done 注意 当for对文件内容进行逐行处理时,会忽略空行 示例 例1 ping 主机的脚本(初始版):缺点执行过程 ...

  6. HTTP系列之Referer和Referrer policy简介

    目录 @ 1.前言摘要 在csdn网站随便抓个链接来看看: Referer参数: referrer policy是unsafe url的,ok,下面介绍一下Referer和referrer polic ...

  7. 遍历json数据的几种方式

    json(JavaScript Object Notation),json是一种多用于存储和交换文本信息的语法.他能够进行数据的传输,通常和ajax一起使用.它具有体积小.速度快,易解析等诸多优点. ...

  8. C++ const使用总结

    这里针对C++中const的一些一般用法进行一下简单的总结 一.定义常量 常量不可修改 : ; 与#define宏定义常量的区别:(1)const常量具有类型,编译器可以进行安全检查:#define宏 ...

  9. 在Vue-cli3.x中引入element-ui的新方式

    今天登上element官网,发现element对vue-cli3.x的项目做了特殊定制: 这意味着即使是按需引入,也无需像过去那样手动安装babel-plugin-component,配置babel. ...

  10. sed文本处理

    1.基本概述 sed是一个流编辑器, 非交互式的编辑器,它一次处理一行内容. 处理时,把当前处理的行存储在临时缓冲区中,称* 为"模式空间"(pattern space) 接着用 ...