19.VUE学习之- v-for与computed结合功能 筛选实例讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="hdcms">
<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: '#hdcms',
computed:{
stus(){
if(this.type=='all'){
return this.user;
}else{
//方法一:
// Type=this.type; //这里的this指的是当前因点击的input里的value值而改变到的data里的type值
// return this.user.filter(function(v){ //括号里的v是循环data/user里的当前数组
// return v.sex ==Type;
// });
//方法二:可以直接把this.type的值传递给filter里.这里的this指的是当前因点击的input里的value值而改变到的data里的type值
return this.user.filter((v)=>{
//用改变后的data里的type值去逐条过滤user里的sex值是否匹配.匹配后才返回此条.
return v.sex ==this.type;
});
}
}
},
data: {
type:'all',
user:[
{name:'小明',sex:'boy'},
{name:'小强',sex:'boy'},
{name:'小丽',sex:'girl'},
{name:'小梅',sex:'girl'}
]
}
});
</script>
</body>
</html>
效果:
19.VUE学习之- v-for与computed结合功能 筛选实例讲解的更多相关文章
- 43_2.VUE学习之--不使用组件computed计算属性超简单的实现美团购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue学习3:计算属性computed与监听器
下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- Vue学习笔记:methods、computed、watch的区别
自:https://www.jb51.net/article/120073.htm 首先要说,methods,watch和computed都是以函数为基础的,但各自却都不同 而从作用机制和性质上看,m ...
- vue学习笔记(五):对于vuex的理解 + 简单实例
优点:通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护.使用vuex来引入外部状态管理,将业务逻辑切分到组件外,可以避免重复的从服务端抓取数据. 详情请参考官 ...
- Dubbo学习总结(1)——Dubbo入门基础与实例讲解
Dubbo是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000,000+次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点.Dubbo是一个分布式服务框架,致力于 ...
- VUE学习之计算属性computed
计算属性:computed 先看一下官网的说法 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="ex ...
- Vue学习看这篇就够
Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...
- vue学习心得
前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
随机推荐
- Unity MonoBehaviour.Invoke 调用
使用 Invoke() 方法需要注意 3点: 1 :它应该在 脚本的生命周期里的(Start.Update.OnGUI.FixedUpdate.LateUpdate)中被调用: 2:Invoke(); ...
- Microsoft JET Database Engine (0x80004005)未指定的错误解决
Microsoft JET Database Engine (0x80004005)未指定的错误,这个错误只有在使用Access数据库时才能出现 出现以上问题,可以使用以下步骤进行解决问题: 1.系统 ...
- mysql报错this is incompatible with sql_mode=only_full_group_by
1.报错信息 com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: In aggregated query without GROUP ...
- java与模式读后总结
一 老规则边看边写书上的代码,磨磨蹭蹭三个多星期终于把一本1000+的java与模式看完了. 于是,在这里贴上自己对每个模式的思考和总结,其实这个东西在我边看边写的时候已经写了一大半,博文再写一次算是 ...
- Spring整合Struts2 XML版
1.jar包 <!--spring配置--> <dependency> <groupId>org.springframework</groupId> & ...
- Arduino连接pH计
关于arduino连接ph,核心的东西就是对ph传感器返回的信号值进行一系列的操作,注意因为返回的信号很弱,而且外部环境对其影响也很大,所以需要在电路设计上加入一些功能,比如信号放大.滤波等,电路设计 ...
- MATLAB之数学建模:深圳市生活垃圾处理社会总成本分析
MATLAB之数学建模:深圳市生活垃圾处理社会总成本分析 注:MATLAB版本--2016a,作图分析部分见<MATLAB之折线图.柱状图.饼图以及常用绘图技巧> 一.现状模式下的模型 % ...
- 不该被忽视的CoreJava细节(三)
一.不该被遗忘的移位位运算 本文主要介绍移位运算(Shift Operation), 适当介绍一下其它相关的位运算. 甭说计算机刚发明那会,就连21世纪初那段日子,计算机内存都是KB/MB计算的.编写 ...
- 捷宇高拍仪XY530 网页集成总结
应甲方要求,需要把高拍仪集成到B/S系统中来,在集成过程中遇到的几点问题做为总结,以备查找. 1.甲方送来的高拍仪是淘宝上买来的,型号是XY530,功能非常简单,成像效果也很一般.如果没有其它要求,可 ...
- [Git] Create a new repository on the command line
echo "# xxx" >> README.md git init git add README.md git commit -m "first commi ...