<!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 实现数据的的过滤和排序的更多相关文章

  1. Vue--使用watch、computed、filter方法来监控

    watch与computed.filter: watch:监控已有属性,一旦属性发生了改变就去自动调用对应的方法 computed:监控已有的属性,一旦属性的依赖发生了改变,就去自动调用对应的方法 f ...

  2. Vue的computed(计算属性)使用实例之TodoList

    最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组 ...

  3. Vue 基本列表 && 数据过滤与排序

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  4. 微信小程序 WXS实现json数据需要做过滤转义（filter）

    前言 最近有在做小程序开发,在开发的过程中碰到一点小问题,描述一下先. 本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多,不同的状态码会对应不同的文字,但是在微信小程序中又没有类似 v ...

  5. vue中computed和watch

    computed 计算属性 能够监听vue数据上的变化,页面上来就执行一次,每改变一次数据就又触发.在操作数据的时候,会派生出另一个事情 1.函数形式 computed:{ listenArr(){ ...

  6. vue中computed和watch的写法，以及区别

    <template> <div class="print"> <div style="color: red"> <p ...

  7. Vue的Computed的使用

    Vue的Computed的使用 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. 详解vue父组件传递props异步数据到子组件的问题

    案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-d ...

  9. vue源码之响应式数据

    分析vue是如何实现数据响应的. 前记 现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...

随机推荐

  1. Maven将jar包放入本地库

    转自:https://blog.csdn.net/qq_33314107/article/details/73549256 这是由于Oracle授权问题,Maven3不提供Oracle JDBC dr ...

  2. Storm消费Kafka值得注意的坑

    问题描述: kafka是之前早就搭建好的,新建的storm集群要消费kafka的主题,由于kafka中已经记录了很多消息,storm消费时从最开始消费问题解决: 下面是摘自官网的一段话:How Kaf ...

  3. Tomcat 保存镜像实战操作( 目录挂载方法 )

    查看数据保存的位置 docker inspect --format='{{.Mounts}}' mxg_tomcat 宿主机数据保存在 /usr/local/project , 将此路径数据备份在 b ...

  4. LVS总结

    一, LVS介绍 LVS linux virtual server 即linux虚拟服务器,是由章文嵩博士主导的开源负载均衡项目,目前LVS已经被集成到Linux内核模块中. 集群: 将多个服务器集中 ...

  5. JMETER - BEANSHELL获取响应结果

    获取响应结果 添加后置处理器     //获取获取请求的返回值 String response = prev.getResponseDataAsString(); //日志打印获取请求的返回值 log ...

  6. uboot学习之五-----uboot如何启动Linux内核

    uboot和内核到底是什么?uboot实质就是一个复杂的裸机程序:uboot可以被配置也可以做移植: 操作系统内核本身就是一个裸机程序,和我们学的uboot和其他裸机程序没有本质的区别:区别就是我们操 ...

  7. AOP技术介绍－－（.Net平台AOP技术研究）

    4.1.Net平台AOP技术概览 .Net平台与Java平台相比,由于它至今在服务端仍不具备与unix系统的兼容性,也不具备类似于Java平台下J2EE这样的企业级容器,使得.Net平台在大型的企业级 ...

  8. CBV和FBV

    CBV和FBV 刚开始写的视图都是基于函数版本的,称为FBV,后来写了一个NB的叫CBV,就是基于类的 FBV就是在URL中的一个路径对应一个函数 urlpatterns = [ url(r'^adm ...

  9. JS原型链详解（2）

    深入理解javascript原型链 在javascript中原型和原型链是一个很神奇的东西,对于大多数人也是最难理解的一部分,掌握原型和原型链的本质是javascript进阶的重要一环.今天我分享一下 ...

  10. c#代码规则,C#程序中元素的命名规范

    俩种命名方法 1.Pascal 命名法,第一个字母大写其它字母小写Userid 2.Camel命名法,所有单第一方写大写,其它小写,骆峰命名法,userId C#程序中元素的命名规范项目名:公司名.项 ...