1. <!DOCTYPE html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<title>v-for与computer结合功能实例讲解</title>
  7. 		<script src="vue.js"></script>
  8. 	</head>
  9.  
  10. 	<body>
  11. 		<div id="lantian">
  12. 			<li v-for="v in stus">
  13. 				{{v.name}}--{{v.sex}}
  14. 			</li>
  15. 			{{type}}
  16. 			<input type="radio" v-model="type" value="girl" />女孩
  17. 			<input type="radio" v-model="type" value="boy" />男孩
  18. 		</div>
  19.  
  20. 		<script>
  21. 			var app = new Vue({
  22. 				el: '#lantian',
  23. 				computed: {
  24. 					stus() {
  25. 						if(this.type == 'all') {
  26. 							return this.user;
  27. 						} else {
  28. 							return this.user.filter((v) => {
  29. 								return v.sex == this.type;
  30. 							});
  31. 						}
  32. 					}
  33. 				},
  34. 				data: {
  35. 					type: 'all',
  36. 					user: [{
  37. 							name: '小王',
  38. 							sex: 'boy'
  39. 						},
  40. 						{
  41. 							name: '小明',
  42. 							sex: 'boy'
  43. 						},
  44. 						{
  45. 							name: '小李',
  46. 							sex: 'girl'
  47. 						},
  48. 						{
  49. 							name: '小梅',
  50. 							sex: 'girl'
  51. 						}
  52. 					]
  53. 				}
  54. 			});
  55. 		</script>
  56. 	</body>
  57.  
  58. </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. PKU 2513 Colored Sticks(并查集+Trie树+欧拉路径(回路))

    题目大意: 给定一些木棒,木棒两端都涂上颜色,求是否能将木棒首尾相接,连成一条直线,要求不同木棒相连接的一端必须是同颜色的. 解题思路: 可以用图论中欧拉路的知识来解这道题,首先可以把木棒两端看成节点 ...

  2. 404 Not Found 探秘Nginx转发处理流程

    一.问题描述 访问一个链接地址后报404 Not Found nginx/1.10.2 1 112.95.211.154 - - [08/Mar/2018:15:22:21 +0800] " ...

  3. ACM-ICPC 2018 徐州赛区网络预赛 G. Trace (set维护)

    注意题目保证不会有一个矩形完全包括另一个矩形的情况 时间序上从后往前看,一个坐标\((x,y)\)加进来之前,如果已经有\(x_i<x\),则对结果的贡献为\(x-x_i\);若不存在\(x_i ...

  4. jvm2

    垃圾回收器的实现: 1.让用户都暂停,不再产生垃圾,就去收集垃圾.新生代用复制算法清理垃圾,老生代用标记整理算法搜集垃圾. 优秀的算法:服务端默认是CMS收集器. %..jvm案例演示 内存: Jco ...

  5. CSS 图像透明/不透明

    CSS 图像透明/不透明 使用CSS很容易创建透明的图像. 注意:CSS Opacity属性是W3C的CSS3建议的一部分. 一.示例一:创建一个透明图像 CSS3中属性的透明度是 opacity. ...

  6. 20145313Java第五次实验

    实验内容 网络编程TCP代码的结对完成,一人服务器,一人客户端,进行数据传输. 结伴对象:20145313卢鑫 实验步骤 本次实验中,需要两台电脑互联.一台电脑开启无线网,充当客户端,另一台连入局域网 ...

  7. C teaching

    L1 Preparation 1. environment codeblocks 2.variable, const 3. data type int "%d" char &quo ...

  8. SpringBoot 集成Netty实现UDP Server

    注:ApplicationRunner 接口是在容器启动成功后的最后一步回调(类似开机自启动). UDPServer package com.vmware.vCenterEvent.netty; im ...

  9. Spring boot 解决 hibernate no session异常

    启动类中加入 @Beanpublic OpenEntityManagerInViewFilter openEntityManagerInViewFilter(){ return new OpenEnt ...

  10. MATLAB 图形图像处理

    theme: MATLAB author: pprp date: 2018/2/2 --- MATLAB 图形图像处理 二维绘图命令 plot 线性空间 plot(t,[x1,x2,x3]) : 在同 ...