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之路-函数基础&局部变量与全局变量&匿名函数&递归函数&高阶函数
一.函数的定义与调用 函数:组织好的.可重复使用的.用户实现单一或者关联功能的代码段.函数能够提高应用的模块性和代码的重复利用率.Python提供了很多内置的函数,比如len等等,另外也可以根据自己的 ...
- Python之路-初识python及环境搭建与测试（Python安装、Anaconda安装、PyCharm安装）
一.认识Python 起源 Python的作者是著名的“龟叔”Guido van Rossum,他希望有一种语言,这种语言能够像C语言那样,能够全面调用计算机的功能接口,又可以像shell那样,可以轻 ...
- 读取FTP上的excel文件，并写入数据库
今天遇到一些问题,需要从ftp上读取一些excel文件,并需要将excel中的数据写入到数据库,这样就可以通过管理页面查看这些数据. 我将相关工作分为三步,1.从ftp上读取相关文件,并将excel文 ...
- Sql Server中的标识列(自增长字段)
一.标识列的定义以及特点 SQL Server中的标识列又称标识符列,习惯上又叫自增列.该种列具有以下三种特点: 1.列的数据类型为不带小数的数值类型2.在进行插入(Insert)操作时,该列的值是由 ...
- Taro -- 微信小程序wxParse达到html转换wxml
Taro微信小程序可以用wxParse来达到html转换wxml的效果:https://github.com/NervJS/taro-components-test/blob/master/src/p ...
- Nginx优化_自定义报错页面
自定义返回给客户端的404错误页面 1. 优化前,客户端使用浏览器访问不存在的页面,会提示404文件未找到 client]# firefox http://192.168.4.5/xxxxx ...
- [Poj2349]Arctic Network（二分，最小生成树）
[Poj2349]Arctic Network Description 国防部(DND)要用无线网络连接北部几个哨所.两种不同的通信技术被用于建立网络:每一个哨所有一个无线电收发器,一些哨所将有一个卫 ...
- Ubuntu Server下MySql数据库备份脚本代码
明: 我这里要把MySql数据库存放目录/var/lib/mysql下面的pw85数据库备份到/home/mysql_data里面,并且保存为mysqldata_bak_2012_04_11.tar. ...
- R reticulate 设置 python 环境
library("reticulate") use_python("/usr/bin/python", required = T) py_config() 注意 ...
- Spring Boot Shiro
Shiro 核心 API Subject:用户主体(每次请求都会创建Subject). principal:代表身份.可以是用户名.邮件.手机号码等等,用来标识一个登录主体的身份. credentia ...