<!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. struts.xml 配置文件的主要元素

    1.package元素 作用: 在struts2的配置文件中引入了面向对象思想.分包管理,易于管理动作类,便于模块化开发动作类. 属性: name:包的名称.名称唯一. extends:一般情况下需要 ...

  2. vue简单demo

    为了学习基础语法,我并没有用vue-cli脚手架来vue init [基于什么类型]  [项目名称]初始化项目,而是直接<script>../vue.js</script> & ...

  3. $一步一步学Matlab（4）——使用Matlab进行初等数学运算

    Matlab可以看成是一个功能强大的计算器,那么既然是计算器,进行基本的数学运算绝对是必不可少的.本文主要讲解如何用Matlab做初等数学运算,所谓"初等数学运算",可以理解成是小 ...

  4. [BZOJ4566][HAOI2016]找相同子串

    COGS传送门 用SAM重新写了一遍.. 我的方法比较笨,先把两个串连在一起,算出来相同子串个数,同理算出s1和s2的子串个数.作差即可. 至于如何统计子串个数,首先toposort后搞出right集 ...

  5. 20145301 《Java程序设计》第九周学习总结

    20145301 <Java程序设计>第八周学习总结 教材学习内容总结 整合数据库 JDBC JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接口,数据库厂商则对接口进行操作 ...

  6. 20145328 《Java程序设计》第6周学习总结

    20145328 <Java程序设计>第6周学习总结 教材学习内容总结 输入/输出 InputStream与OutputStream 从应用程序角度来看,如果要将数据从来源取出,可以使用输 ...

  7. 20145335《java程序设计》第三次实验报告

    20145335郝昊<java程序设计>第三次实验报告 实验目的与要求 以结对编程的方式编写一个软件,Blog中要给出结对同学的Blog网址,可以拍照展现结对编程 情况,可以参考一下其他学 ...

  8. Jenkins FreeStyle or Pipeline Job

    FreeStyle Job: 1. 需要在页面添加模块配置项与参数完成配置 2. 每个Job仅能实现一个开发功能 3. 无法将配置代码化,不利于Job配置迁移与版本控制 4. 逻辑相对简单,无额外学习 ...

  9. windows环境下mysql的解压安装以及备份和还原

    系统环境为server2012 1.下载mysql解压版,解压安装包到指定目录 2.在以上目录中,复制一份my-default.ini文件,重命名为my.ini,进行如下修改(按照需要): [mysq ...

  10. vue.js的一些小语法v-bind,v-if,v-show,v-else

    知识点: v-bind 动态绑定标签属性 v-bind 可简写为 : 使用v-bind 绑定class和内联样式 使用v-if,v-show,v-else进行条件渲染 <template> ...