<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>v-for与computer结合功能实例讲解</title>

		<script src="vue.js"></script>

	</head>

	<body>

		<div id="lantian">

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

				{{v.name}}--{{v.sex}}

			</li>

			{{type}}

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

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

		</div>

		<script>

			var app = new Vue({

				el: '#lantian',

				computed: {

					stus() {

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

							return this.user;

						} else {

							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>

　　

019——VUE中v-for与computer结合功能实例讲解的更多相关文章

  1. 020——VUE中变异方法push的留言版实例讲解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 007——VUE中非常使用的计算属性computed实例

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

  3. vue中使用some删除list中的数据

    在vue中可以使用some方法查找需要删除的所以 this.list.some((item, i) => { if (item.id == id) { this.list.splice(i, 1 ...

  4. Vue中基本指令用法

    指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...

  5. vue状态管理vuex从浅入深详细讲解

    1.vuex简介以及创建一个简单的仓库 vuex是专门为vue框架而设计出的一个公共数据管理框架,任何组件都可以通过状态管理仓库数据沟通,也可以统一从仓库获取数据,在比较大型的应用中,数据交互庞大的情 ...

  6. vue中的vue-cli

    在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 np ...

  7. Vue学习笔记七：Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

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

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

  9. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

随机推荐

  1. SpringCloud Config Server中{application}等占位符使用场景设置默认拉去分支

    Spring Cloud Config服务器支持一个Git仓库URL,其中包含{application}和{profile}(以及{label})的占位符. 1.各个占位符所代表的含义 applica ...

  2. Word 为标题设置段前段后间距设置与异常

    一.概述 在进行Word文档写作时,常常要求我们对(节)标题设置段前段后间距.例如: (2)按照标题的不同,分别采用不同的段前段后间距: 标题级别 段前段后间距 章标题 30磅 一级节标题 18磅 二 ...

  3. DevStore分享：详析消费者十大心理学

    做生意,其实就是一个恋爱的过程,让用户找到你.了解你,爱上你.而这个过程中的关键点就是用户.只要与用户心理相关的,那么就会影响到他们的购买决策.而作为卖方的你,就应该了解消费者心里面在想些什么. 第一 ...

  4. js实现excel的解析

    在浏览网页的时候不小心看到了这个github的资源(https://github.com/SheetJS/js-xlsx),真不错.之前在开发的时候曾遇到客户要求在前端解析excel并展示出来.这里记 ...

  5. H5 播放视频常见bug及解决方案

    本文摘自:本文来自“小时光茶社(Tech Teahouse)”公众号 原文:https://mp.weixin.qq.com/s/MM5ZwCiWLAeHalsNYMImnw 1. 自动播放问题 通过 ...

  6. windows库

    1.windows库的存在方式 1.1.静态库:不能被加载的程序,可以理解为目标程序的归档:*.lib. 1.2.动态库:是可以被加载的程序:*.dll. 2.静态库 2.1.静态库的特点    目标 ...

  7. Python3.x：遍历select下拉框获取value值

    Python3.x:遍历select下拉框获取value值 Select提供了三种选择方法: # 通过选项的顺序,第一个为 0 select_by_index(index) # 通过value属性 s ...

  8. Mac开发配置手册

    系统设置 在任何的操作系统中,首先你需要做一件事就是更新系统,点击窗口左上角的  > 关于本机 > 软件更新.此外,如果这是一部新的电脑,你还需要到系统设置进行一些适当调整.如何调整,取 ...

  9. 防止XSS攻击的方式

    主要有三种请求方式,进行过滤替换非法符号 1.普通的GET请求数据: 2.FORM表单提交数据: 3.Json格式数据提交: 把下面5个文件放入项目中即可 package com.joppay.adm ...

  10. POJ-2479 Maximum sum（动态规划）

    最大子序列和的加强版. 借助最大子序列和,分别正向和反向遍历一遍得到left和right数组(具体含义见代码注释) 然后再对left和right数组进行修正,保存从对应元素起向左或向右的最大连续和. ...