vue中limitBy，filterBy，orderBy的用法
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的用法的更多相关文章
- Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- vue中mixin的理解与用法
vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引 ...
- vue中computed的作用以及用法
在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...
- vue中is的作用和用法
回顾vue官方文档的过程中发现了is这个特性,虽然以我的写代码风格实在用不上,不过还是记录一下这个知识点 is的作用 <ul> <li></li> <li&g ...
- vue中computed和watch的用法
computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理: computed比较适合对多个变量或 ...
- vue 中 px转vw的用法
下面介绍最简单的用法 1 下载依赖 npm install postcss-import postcss-loader postcss-px-to-viewport --save-dev 2 在项目根 ...
- vue中的.sync修饰符用法
在项目中接触到父组件传值给子组件的时候,想在子组件改变父组件传的值.(比如用于弹窗关闭) 但是正常来说,vue2是不允许子组件直接改父组件传进去的值的. 所以我们需要在子组件内定义自定义事件,通知父组 ...
- Vue中jsx的最简单用法
最终页面显示效果为 <div class="open-service" style="color: #0199f0; cursor: pointer;"& ...
- Vue中table表头合并的用法
<div class="panel-container"> <div> <table class="table-head" wid ...
随机推荐
- Java 计算两点间的全部路径（二）
一.有向线段,存储开始点与结束点 /** * 有方向的线段 * * @author Gm * */ public class DirectionLine implements Cloneable { ...
- String，到底创建了多少个对象？
String str=new String("aaa"); <span style="font-size:14px;">String str=n ...
- 享元模式<Flyweight Pattern>
1.What-是什么? 享元模式是一种轻量级的结构型模式.旨在以共享的方式高效的支持大量的细粒度对象的复用.要求能够共享的对象必须是细粒度对象,这些对象比较相似,状态变化小. 2.Why-为什么? ...
- 自学Python5.5-面向对象三大基本特征_继承
自学Python之路-Python基础+模块+面向对象自学Python之路-Python网络编程自学Python之路-Python并发编程+数据库+前端自学Python之路-django 自学Pyth ...
- 会了docker你又多了一个谈资（下）
上篇文章介绍了docker 基本使用及安装([跳转☞会了docker你又多了一个谈资(上)],这篇重点说明下docker使用技巧. 问题1怎么用docker搭建多台服务器? 只需要 docker ru ...
- Zookeeper包中，slf4j-log4j12和log4j冲突问题解决
程序启动时会有日志警告 SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/E ...
- (转) Linux安装启动FTP服务
Linux安装启动FTP服务 Linux服务器默认是没有开启FTP服务的.也没有FTP服务器,为了文件的传输需要用到FTP服务器,以典型的vsftpd为例.vsftpd作为FTP服务器,在Linux系 ...
- pmf文件
1.首先是视频软件,其次还是DISKGENI(磁盘分区软件),当作镜像文件恢复文件到磁盘(类似ISO).2.PMF文件为主要与primarily Pegasus Mail Message Attach ...
- crt执行cat命令后乱码
cat查看二进制文件后所有命令都乱码执行reset即可恢复
- NFS的搭建
NFS是Network File System的简写,即网络文件系统. 网络文件系统是FreeBSD支持的文件系统中的一种,也被称为NFS. NFS允许一个系统在网络上与他人共享目录和文件.通过使用N ...