<!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. 优化css，增加性能

    转载自:https://www.cnblogs.com/xiaoloulan/p/5801663.html 前端性能优化一直是一个比较热门的话题,我们总是在尽我们最大的努力去,提高我们的页面性能,比如 ...

  2. 零基础学习openstack【完整中级篇】及openstack资源汇总

    1.你是如何学习openstack的?2.你对openstack的组件了解多少?3.你认为openstack该如何学习? 一直想写关于openstack的方面的内容,今天终于整理完成.算是完成一桩心事 ...

  3. 【java】使用Builder模式，轻松应对动态繁杂的方法参数

    背景:在咱编写的图片处理模块里,针对加载这个方法,参数很多,如: /** * 加载图片,经过内存.磁盘.两层缓存如果还没找到,则走http访问网络资源 * @param url 地址 * @param ...

  4. jxl.jar包，应该把它放在哪个文件下

    ①把鼠标放到自己的工程上右键 ②点击Properties or Build Path >> Configure Build Path, 然后弹出一个窗口,click AddExternal ...

  5. CSS3、SVG、Canvas、WebGL动画精选整理

    一.CSS3动画 名称 用途 链接 阴影波纹特效 1.元素hover效果 2.突出表现效果 http://www.jq22.com/code80 横板导航菜单动画 导航菜单 http://www.jq ...

  6. 【DeepLearning学习笔记】Neurons神经元

    今天找到一个比较好的deep learning的教材:Neural Networks and Deep Learning 对神经网络有详细的讲解,鉴于自己青年痴呆,还是总结下笔记吧=.= Percep ...

  7. [Linux 005]——IO重定向

    通常在 Shell 中执行命令的时候,我们会在输入命令的下方看到执行结果,操作系统默认将命令的执行结果输出到显示器上.当然,我们也可以手动的指定输出路径,或者输入路径,这就是 I/O 重定向. 1.标 ...

  8. 20145309《Java程序设计》第八周学习总结

    日志 •java.util.logging包提供了日志功能相关类与接口,使用日志的起点是logger类,Logger类的构造函数标示为protected,不是java.util.logging同包的类 ...

  9. RocEDU.阅读.写作《霍乱时期的爱情》书摘（一）

    不可避免,苦杏仁的香味总是让他想起爱情受阻后的命运. 一切都显得凄凉无助,可那一间间肮脏的小酒馆里却传来震耳欲聋的鼓乐声,那是穷人的狂欢,既无涉上帝,也无涉圣神降临节的诫命. 他们经常谈起它,一同承受 ...

  10. 再也不学AJAX了！（一）AJAX概述

    "再也不学AJAX了"是一个与AJAX主题相关的文章系列,包含以下三个部分的内容: AJAX概述:主要回答"AJAX是什么"这个问题: 使用AJAX:介绍如何通 ...