<!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. Hadoop MapReduce实现人员二度关系运算

    1.一度人脉:双方直接是好友 2.二度人脉:双方有一个以上共同的好友,这时朋友网可以计算出你们有几个共同的好友并且呈现数字给你.你们的关系是: 你->朋友->陌生人 3.三度人脉:即你朋友 ...

  2. smarty之缓存机制

    当smarty开启缓存时,当tpl文件内容改变时,则缓存页面会重新生成 test.php: <?php date_default_timezone_set('asia/shanghai'); h ...

  3. 使用BaGet来管理内部Nuget包

    有的时候,我们想要制作一些nuget包,供自己内部调用,不想公开出去,那么就需要一个能够集中管理nuget包的服务了,今天我来给大家介绍一款轻便好用的包管理服务-----BaGet 下载并部署BaGe ...

  4. 二、冯式结构与哈佛结构及ARM处理器状态和处理器模式

    2.1 冯式结构与哈佛结构 2.1.1 两者的区别 如果是独立的存储架构和信号通道那就是哈佛结构,否则就是冯式结构 结构与是否统一编址没有关系,也与 CPU 没有关系,与计算机的整体设计有关 CACH ...

  5. Intellij IDEA 插件开发秘籍

    来这里找志同道合的小伙伴! 这里总结一下 Intellij IDEA 插件开发的知识,供大家参考,本篇文章包含以下内容: 开发环境搭建 Component 介绍 Extension Point And ...

  6. 定位公众号页面，跳转之后 vuejs 失效问题

    是第一个页面的. data () { }, 写成了这样,没写返回 {} 5555~. 网页中死活可以,微信中死活不行. data () { return {} },

  7. 转Serial,Parallel,CMS,G1四大GC收集器特点小结

    转 https://blog.csdn.net/u013812939/article/details/48782343 1.Serial收集器 一个单线程的收集器,在进行垃圾收集时候,必须暂停其他所有 ...

  8. 企业级监控软件Zabbix搭建部署之zabbix在WEB页面中的配置

    企业级监控软件zabbix搭建部署之zabbix在WEB页面中的配置 企业级监控软件zabbix搭建部署之zabbix在WEB页面中的配置 关于安装请看 http://www.linuxidc.com ...

  9. R语言里面的循环变量

    for (i in 1:10) { print("Hello world") } 以上这条命令执行完之后,变量i会被保存下来!并且,i的值将是10. 程序中有多处循环的时候要非常注 ...

  10. 利用已控的标边界一台机器的 beacon对目标内网进行各种存活探测

    本节的知识摘要: 基于常规 tcp / udp 端口扫描的内网存活探测 基于 icmp 的内网存活探测 基于 arp 的内网存活探测 加载外部脚本进行的各种存活探测 基础环境说明:: WebServe ...