vue 使用 computed 结合 filter 实现数据的的过滤和排序
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head> <body>
<div id="app">
<ul>
<template v-for="booksV in filterbooks">
<li>{{booksV.name}}</li>
<li>{{booksV.author}}</li>
</template>
</ul>
</div> <script>
new Vue({
el: '#app',
data: {
books: [{
name: "名字一",
author: "1111"
}, {
name: "名字二",
author: "2222222222222"
}, {
name: "名字三",
author: "33333333333333333"
}, {
name: "名字四",
author: "44444444444444444444"
}]
},
computed: { //修改内容并且排序
filterbooks: function() {
var filterbooksArr = [];
var filterbooksArr = this.books.filter(function(book) {
return book.name = book.name + "=============="
}); filterbooksArr.sort(function(a, b) {
return a.author.length < b.author
})
return filterbooksArr
} }
})
</script>
</body> </html>
结果是:
vue 使用 computed 结合 filter 实现数据的的过滤和排序的更多相关文章
- Vue--使用watch、computed、filter方法来监控
watch与computed.filter: watch:监控已有属性,一旦属性发生了改变就去自动调用对应的方法 computed:监控已有的属性,一旦属性的依赖发生了改变,就去自动调用对应的方法 f ...
- Vue的computed(计算属性)使用实例之TodoList
最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组 ...
- Vue 基本列表 && 数据过滤与排序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- 微信小程序 WXS实现json数据需要做过滤转义(filter)
前言 最近有在做小程序开发,在开发的过程中碰到一点小问题,描述一下先. 本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多,不同的状态码会对应不同的文字,但是在微信小程序中又没有类似 v ...
- vue中computed和watch
computed 计算属性 能够监听vue数据上的变化,页面上来就执行一次,每改变一次数据就又触发.在操作数据的时候,会派生出另一个事情 1.函数形式 computed:{ listenArr(){ ...
- vue中computed和watch的写法,以及区别
<template> <div class="print"> <div style="color: red"> <p ...
- Vue的Computed的使用
Vue的Computed的使用 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 详解vue父组件传递props异步数据到子组件的问题
案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-d ...
- vue源码之响应式数据
分析vue是如何实现数据响应的. 前记 现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...
随机推荐
- 命令行运行python -m http.server报错
最近在学习网站搭建,借助python搭建服务器时,在网站目录启动python服务时报错,如下: UnicodeDecodeError: 'utf-8' codec can't decode byte ...
- windows 10 自动升级后环境变量无效
上个礼拜放假的时候,win10提示需要升级,我当时随手就一点更新并关机...今天,在启动项目时候尴尬了: D:\project\js\iam-web\code\iam-web>npm run d ...
- 刚新建好的动态网站项目,创建jsp页面就报错??
拿到刚刚可以运行的Eclipse,就马上想敲码了,但一创建项目之后再创建jsp页面就报错= =! 报错的内容大概为缺乏对应的jar包. 我们常用Tomcat为中间体,而他本身是带有开发jsp网站的对应 ...
- windows下数字以2进制打印
#include <cstdlib> _itoa(num, buf, 2); 打印buf既是二进制
- 怎样group by一列 select多列
之前sql用的少 竟然不知道这个小技巧 1 将要查询的列 添加到group by后面(会影响查询结果) 2 使用聚合函数如 max select a.accounttitlecode, max(b.c ...
- Centos7 tomcat 启动权限
Cannot find bin/catalina.sh The file is absent or does not have execute permission This file is ne ...
- Python---基础---dict和set2
2019-05-21 写一个程序来管理用户登陆系统的用户信息:登陆名字和密码,登陆用户账号建立后,已存在用户可以用登陆名字和密码重返系统,新用户不能用别人的用户名建立用户账号 ------------ ...
- MATLAB 和 armadillo 数据转换
#include<iostream> #include<armadillo> int D=5; int M=4; int main() { arma::fmat x; x.ra ...
- pandas.DataFrame.drop_duplicates 用法说明
DataFrame.drop_duplicates(subset=None, keep='first', inplace=False) subset考虑重复发生在哪一列,默认考虑所有列,就是在任何一列 ...
- $nextTick
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新. $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextT ...