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 ...
随机推荐
- go中基本数据类型的相互转换
代码 // 基本数据类型的相互转换 package main import ( // 如果一个包没有被使用过,但又不想去掉,可在包名前加"_ "表示忽略 // 比如:_ " ...
- APP性能
一.APP性能维度分析 APP类型众多,根据具体类型划分,性能指标的维度和优先级各不相同.视频类APP归属于娱乐游戏型的APP,因此性能测试维度优先级排序为:流畅度.crash.内存.流量.响应时长 ...
- postgres - 以单用户模式运行一个 PostgreSQL服务器
SYNOPSIS postgres [ -A 0 | 1] [ -B nbuffers] [ -c name=value] [ -d debug-level] [ --describe-config ...
- Maven中添加Jetty服务器配置
<project> <!--其它配置--> <build> <plugins> <plugin> <groupId>org.mo ...
- Webpack3.X版 学习全文
如果你webpack用的是4.x版本,此文章部分知识有所改动,所以学习时尽量使用3.x的版本. 本文讲解的是Webpack3.0+的知识,努力做到全网最好的webpack3.0教程.文章通过一个半月的 ...
- Linux性能优化从入门到实战：12 内存篇：Swap 基础
内存资源紧张时,可能导致的结果 (1)OOM 杀死大内存CPU利用率又低的进程(系统内存耗尽的情况下才生效:OOM 触发的时机是基于虚拟内存,即进程在申请内存时,如果申请的虚拟内存加上服务器实际已用的 ...
- devops持续集成，Centos7.6下gitlab+jenkins(pipeline)实现代码自动上线
持续集成 gitlab+jenkins(pipeline)实现代码自动上线 环境准备:Centos7.6版本ip:192.168.0.13 主机名:gitip:192.168.0.23 主机名:jen ...
- python面向对象--类和实例的认识
'''1.数据属性 2.函数属性''' #创建一个类class Chinese: "这是一个中国人的类" #类属性 money=4000 #注意类和对象均用点来访问自己的属性 de ...
- 基于Redis做内存管理
1 Redis存储机制: redis存储的数据类型包括,String,Hash,List,Set,Sorted Set,它内部使用一个redisObject对象来表示所有的key和value,这个对象 ...
- find 查找目录下的文件
1. 命令功能 find命令用于查到目录下的文件,同时也可以调用其它命令执行相应操作. 2. 语法格式 find [-H] [-L] [-P] [-Olevel] [-D help|tree|sear ...