vuejs的动态过滤
想要通过vuejs动态过滤（这里动态指得是过滤的条件是动态变化的），
一直没找到好办法，
最蠢的办法当然是两个两个数组，一个作为原始副本数组 一个作为视图数组，这样当过滤条件变化的时候
动态拷贝原始数组过滤后的结果 到视图数组，这样就能够使得vuejs感知 我们的视图数组变化，然后来更新视图
这种办法很蠢，而且拷贝很浪费时间，下面上代码
<html> <head>
<script src="http://cdn.bootcss.com/vue/2.1.4/vue.js"></script>
</head> <body>
<div id="app">
<!--<li v-for="n in even(persons)">{{ n.name }}</li>-->
<li v-for="n in personsView">{{ n.name }} :: {{n.age}}</li>
<input type="text" v-model="age" placeholder="age" />
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
age:0,
persons :[{
name: '张三',
age: 30
}, {
name: '李四',
age: 40
}, {
name: '王五',
age: 10
}],
personsView:[{
name: '张三',
age: 30
}, {
name: '李四',
age: 40
}, {
name: '王五',
age: 10
}]
}, methods: {
even: function(persons) {
return persons.filter(function(p) {
return p.age >= 10;
})
}
},
watch:{
age:function(val,oldVal){
console.log('new: %s, old: %s', val, oldVal);
console.log(this.persons.filter(function(p) {
return p.age >= val;
}).slice());
this.personsView = this.persons.filter(function(p){
return p.age >= val;
}).slice();
} } });
</script> </html>
谁有更好的实现办法 一定要告诉我
vuejs的动态过滤的更多相关文章
- TODO：搭建Laravel VueJS SemanticUI
TODO:搭建Laravel VueJS SemanticUI Laravel是一套简洁.优雅的PHP开发框架(PHP Web Framework).可以让你从面条一样杂乱的代码中解脱出来:它可以帮你 ...
- 一次页面从Jq到Vuejs+PartialView的迁徙
题外话 本篇分享不能帮助你入门vue,入门的文章也是无意义的,官方文档http://cn.vuejs.org/v2/guide/ 已经写的不能再清晰了.希望我们勇敢的主动地给自己创造实践的机会. 手里 ...
- 使用vuejs框架进行列表渲染
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6170706.html 1.通过Script引入Vuejs框架 <script t ...
- Vuejs学习笔记1
首次写vue可能会出现:[Vue warn]: Cannot find element: #app 这是因为你的js在html页面头部引入的原因,自定义js文件要最后引入,因为要先有元素id,vue才 ...
- 【vuejs小项目——vuejs2.0版本】单页面搭建
http://router.vuejs.org/zh-cn/essentials/nested-routes.html 使用嵌套路由开发,这里会出错主要把Vue.use(VueRouter);要进行引 ...
- 【vuejs小项目】一、脚手架搭建工作
一.关于vuejs 这是一个MVVM的前端开发框架,model(数据).viewmode(通讯).view(视图),它吸取了reactjs和angularjs的长处,核心重点在于组件化的设计原则. 我 ...
- 使用 v-cloak 防止页面加载时出现 vuejs 的变量名
使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...
- vuejs里封装的和IOS,Android通信模块
项目需要,在vuejs开发的web项目中与APP进行通信,实现原理和cordova一致.使用WebViewJavascriptBridge. 其实也是通过拦截url scheme,支持ios6往前的系 ...
- [Vuejs] 关于vue-router里面的subRoutes
刚学习vue,可能有使用不对的地方,希望没有对大家造成困扰! 使用vue-router,为了能够更好的管理.vue文件,需要用到子路由. 先看个错误的例子 routers.js '/company': ...
随机推荐
- Python获取中国证券报最新资讯
# -*- coding: utf-8 -*- import urllib from bs4 import BeautifulSoup from time import time from time ...
- java web学习总结(十六) -------------------数据库连接池
一.应用程序直接获取数据库连接的缺点 用户每次请求都需要向数据库获得链接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10万访问量,数据库服务器就需要创建10万次连接,极大 ...
- 把普通对象转换成json格式的对象
1.什么叫做JSON?JSON只是一种数据格式(它不是一种新的数据类型) var obj = {name: "中国", age: 5000};//->普通格式的对象 var ...
- Mvc与WebForm优缺点及Mvc的使用
关于Mvc与WebForm的优缺点在网上的评论可谓不胜枚举,但脱离了我们的项目来谈这些意义就不大了.以我们这次改版来看,WebForm的优势有以下几点: 一,可以使用<#include>, ...
- 国内好用的maven仓库，添加到本地nexus中
速度快的maven仓库真的难找,国外网站很多被封了.前天在网上找,有人说阿里有个公开的,速度很快.确实很快! 我添加到本地nexus中,结果不能更新索引,我是这么添加的,如下: 这个地址在浏览器中能够 ...
- 用C#缩小照片上传到各种空间
中秋到了,首先祝各位猿友节日快乐!!! 本博文的原名称是“跟我一起用C#压缩照片上传到各种空间”,评论上有人开骂,没办法我这人就是自信霸气,但是既然有人提出来我还是改掉吧,如果文章写得不好的地方欢迎大 ...
- 本周进步要点20161023(含李笑来第二场live笔记要点)
本周主要忙于去武汉参加iDOF2016智能数字油田会议,会上做了题为“油田SOA及云平台的系统思考与实践”的报告,为了准备这篇报告,用到了一些以前学过的知识,具体内容见“参加iDOF2016会议的收获 ...
- Linux2.6内核进程调度系列--scheduler_tick()函数1.总体思想
参考的是ULK第三版,Linux2.6.11.12内核版本. 调度程序依靠几个函数来完成调度工作,其中最重要的第一个函数是scheduler_tick函数,主要步骤如下: /** * 维持当前最新的t ...
- 数据集转换为Json
数据集转换为Json 第一步:新建一个类对象 通常我会写三个属性:状态.返回信息.数据集 第二步:新建一个JSON转换类 第三步:把类对象当做参数传入JSON转换类 ———————————————— ...
- 适配ios10（iTunes找不到构建版本）
前两天上架App遇到一个比较神奇的问题,打包好的项目使用Application Loader上传成功,但是在iTunes里面却找不到构建版本,App的活动页面也没有相应的版本. 之前了解IOS10对用 ...