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': ...
随机推荐
- 深入理解Redis系列
Redis基础教程详情参考:http://www.yiibai.com/redis/redis_quick_guide.html 基础知识: 0.Redis特点:Redis是Remote Dictio ...
- No.009：Palindrome Number
问题: Determine whether an integer is a palindrome. Do this without extra space. 官方难度: Easy 翻译: 不使用额外空 ...
- ExpandableListView实现展开更多和收起更多
[需求]: 如上面图示 当点开某个一级菜单的时候,其他菜单收起: 子级菜单默认最多5个: 多于5个的显示"展开更多" 点击"展开更多",展开该级所有子级菜单,同 ...
- tomcat 7 WARNING: A context path must either be an empty string or start with a '/' and do not end with a '/'. The path [/] does not meet these criteria and has been changed to []
tomcat 7 WARNING: A context path must either be an empty string or start with a '/' and do not end w ...
- JavaScript-数组去重由慢到快由繁到简
indexOf去重 Array.prototype.unique1 = function() { var arr = []; for (var i = 0; i < this.length; i ...
- CSS3 Transitions, Transforms和Animation的使用
一.前言 CSS3动画相关的几个属性是:transition, transform, animation:分别理解为过渡,变换,动画.虽意义相近,但具体的功能和在CSS3中承担的工作有一定的差异. t ...
- 列表屏幕(List Screen)
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Java—字符串小结
最近工作中用到了大量有关字符串截取的知识,在此做出总结,希望需要的朋友带来帮助: 可以复制粘贴代码直接在java中测试1.将字符串中的指定字符":","-"删 ...
- Python之Mac上搭建集成开发环境
首先下载一个东西: 找到下载地址:https://download.jetbrains.8686c.com/python/pycharm-professional-2016.2.1.dmg pycha ...
- Vs2013 html5开发WP8.1 APP之jquery
仿安卓原生界面,先使用JQM,最新的JQM使用了JQ1.8.5 然后在WP8以上就会遇到动态创建控件的安全性问题 换成JQ2.X即可,但在WP8.1中一定不要删除了 <script src=&q ...