1.limitBy的用法

<body>
<div id="box">
<ul>
<li v-for="val in arr | limitBy 2 1"> <!-- 从index=1的位置取两个-->
{{val}}
</li>
</ul>
</div>
<script>

var vm=new Vue({
data:{
arr:[1,2,3,4,5]
},
methods:{

}
}).$mount('#box');

</script>

2  filterBy的用法：筛选中数组中含有a字母的值

<body>
<div id="box">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | filterBy a">
{{val}}
</li>
</ul>
</div>
<script>

var vm=new Vue({
data:{
arr:['width','height','background','orange'],
a:''
},
methods:{

}
}).$mount('#box');

</script>
</body>

3 orderBy的用法

<body>
<div id="box">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | orderBy a">
{{val}}
</li>
</ul>
</div>
<script>

var vm=new Vue({
data:{
arr:['width','height','background','orange'],
a:''
},
methods:{

}
}).$mount('#box');

</script>
</body>

vue中limitBy，filterBy，orderBy的用法的更多相关文章

  1. Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  2. vue中mixin的理解与用法

    vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引 ...

  3. vue中computed的作用以及用法

    在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...

  4. vue中is的作用和用法

    回顾vue官方文档的过程中发现了is这个特性,虽然以我的写代码风格实在用不上,不过还是记录一下这个知识点 is的作用 <ul> <li></li> <li&g ...

  5. vue中computed和watch的用法

    computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理: computed比较适合对多个变量或 ...

  6. vue 中 px转vw的用法

    下面介绍最简单的用法 1 下载依赖 npm install postcss-import postcss-loader postcss-px-to-viewport --save-dev 2 在项目根 ...

  7. vue中的.sync修饰符用法

    在项目中接触到父组件传值给子组件的时候,想在子组件改变父组件传的值.(比如用于弹窗关闭) 但是正常来说,vue2是不允许子组件直接改父组件传进去的值的. 所以我们需要在子组件内定义自定义事件,通知父组 ...

  8. Vue中jsx的最简单用法

    最终页面显示效果为 <div class="open-service" style="color: #0199f0; cursor: pointer;"& ...

  9. Vue中table表头合并的用法

    <div class="panel-container"> <div> <table class="table-head" wid ...

随机推荐

  1. 使用 java 创建你的第一个区块链（第二部分）

    本系列教程的目的是帮助您了解如何开发区块链技术. 在这第二个教程中,我们将: 创建一个简单的钱包: 使用我们的区块链发送已签名的交易: 感觉更酷. 以上这些将使我们拥有自己的加密货币! 从上一个教程开 ...

  2. redis和mongodb面试题（一）

    ● 请你回答一下mongodb和redis的区别 参考回答: 内存管理机制上:Redis 数据全部存在内存,定期写入磁盘,当内存不够时,可以选择指定的 LRU 算法删除数据.MongoDB 数据存在内 ...

  3. Linux 的帐号与群组：有效与初始群组、groups, newgrp

    关于群组: 有效与初始群组.groups, newgrp 认识了帐号相关的两个档案 /etc/passwd 与 /etc/shadow 之后,您或许还是会觉得奇怪, 那么群组的设定档在哪里?还有,在 ...

  4. LINUX修改path环境变量

    PATH用作运行某个命令的时候,本地查找不到某个命令或文件,会到这个声明的目录中去查找. 例如一般设定java的时候为了在任何目录下都可以运行bin文件夹下的命令.就将java的bin目录声明到pat ...

  5. 网络初级篇之OSPF（二）实验

    一.实验目的:     下面关于OSPF的实验,仔细看配置过程,以增加对OSPF的理解. 二.实现目标:     使用OSPF实现所有主机之间的通信 三.配置过程: 1.AR1的配置过程:      ...

  6. 阿里云(ecs服务器)使用3-安装mysql数据库以及远程部署

    1.安装 1.下载rpm包,下载地址 http://dev.mysql.com/downloads/mysql/,选择Linux-Generic版本 .新建 /usr/local/mysql 文件夹, ...

  7. Spring NamespaceHandlerResolver xml的标签加载的扩展 和 ApplicationContext

    NamespaceHandlerResolver public NamespaceHandler resolver(String namespaceUri); DefaultNamespaceHand ...

  8. 【模板】manachar

    马拉车算法用于解决最长回文字串的一类问题,可以将时间复杂度降低为\(O(n)\),几乎达到了理论上的下界. 核心思想:将分奇偶讨论的情况转化成同一种情况(奇数). 下面介绍该算法需要用到的几点性质: ...

  9. Spring中 aop的 xml配置（简单示例）

    示例: aop,即面向切面编程,面向切面编程的目标就是分离关注点. 比如:小明(一位孩子)想吃苹果,首先得要有苹果,其次才能吃.那么妈妈负责去买水果,孩子负责吃,这样,既分离了关注点,也减低了代码的复 ...

  10. buuctf@reverse1

    flag{hell0_w0rld}