<!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. java 并发——内置锁

    坚持学习,总会有一些不一样的东西. 一.由单例模式引入 引用一下百度百科的定义-- 线程安全是多线程编程时的计算机程序代码中的一个概念.在拥有共享数据的多条线程并行执行的程序中,线程安全的代码会通过同 ...

  2. sidekiq安装及使用

    参考:https://github.com/mperham/sidekiq/wiki/Getting-Started https://wdxtub.com/2016/07/06/sidekiq-gui ...

  3. playbook实现nginx安装

    1. 先在一台机器上编译安装好nginx,然后打包 tar -zcvf nginx.tar.gz /usr/local/nginx --exclude=conf/nginx.conf --exclud ...

  4. Safari中的input、textarea无法输入的问题

    原因是这两种表单元素上应用了user-select:none的css属性.一般没人刻意这么做,可能是这样的情况: * { user-select: none; } 在css中排除掉这两种元素就好了: ...

  5. lightGallery 一个视屏不播放 解决方法

    这次使用了lightGallery,感觉还不错.样式比较美观,并且支持响应式. 使用过程中,我遇到了下面的问题: 当我 .picsgallery里面只有一个 .gItem的时候.点击弹出幻灯片,再点击 ...

  6. windows AD域安装及必要设置

    一.安装AD域 运行dcpromo命令,安装AD域. 步骤: 1.win+R 2.dcpromo 图例: 百度百科关于“dcpromo”解释: dcpromo命令是一个“开关”命令.如果Windows ...

  7. kali 安装最新firefox的悲惨经历

    最新的的firefox用的是量子内核,在windows上面的确感觉相比之前的firefox快了好多 想把kali 2017虚拟机的也替换掉 按照步骤: 1 添加源: /etc/apt/sources. ...

  8. xml简单介绍及libmxml编程

    今天我们来简单介绍一下,关于xml的一些内容,包括自己编写一些程序进行生成和解析. 首先我们我们还是从xml的演化历史来了解一下它吧. 历史演化 GML: 在20世纪60年代为了促进数据交换和操作,通 ...

  9. 【纯代码】Swift - 自定义底部弹窗基类（可根据需要自行扩展内容）

    //弹窗视图 class PopView : UIView { var selectButtonCallBack:((_ title:String)-> Void)? var contenVie ...

  10. ubuntu如何释放内存

    答: step 1: 以最高权限同步所有的缓存到磁盘中 sync sync step2: 执行以下命令指示内核对内存进行调整 echo 3 > /proc/sys/vm/drop_caches ...