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 ...
随机推荐
- jQuery效果--淡入和淡出
jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...
- Caffe中im2col的实现解析
这里,我是将Caffe中im2col的解析过程直接拉了出来,使用C++进行了输出,方便理解.代码如下: #include<iostream> using namespace std; bo ...
- Linux Exploit系列之七 绕过 ASLR -- 第二部分
原文地址:https://github.com/wizardforcel/sploitfun-linux-x86-exp-tut-zh/blob/master/7.md 这一节是简单暴力的一节,作者讲 ...
- Windows下安装Oracle 11g 2版 64位,从下载,安装,测试连接成功~!
首先进入oracle官网下载文件 点击进入 也可以选择结合PanDownload网页版使用百度链接下载 链接: https://pan.baidu.com/s/1UHJiaMXUrSG2IX793ng ...
- python、第一篇：初识数据库
一 数据库管理软件的由来 基于我们之前所学,数据要想永久保存,都是保存于文件中,毫无疑问,一个文件仅仅只能存在于某一台机器上. 如果我们暂且忽略直接基于文件来存取数据的效率问题,并且假设程序所有的组件 ...
- PIL：处理图像的好模块
介绍 PIL是一个专门用来处理图像的模块,可以对图象进行各种各样的变换 打开一张图片 from PIL import Image # 调用Image下的open方法,即可打开一张图片 # 得到的im便 ...
- 2019-2020-1 20199319《Linux内核原理与分析》第八周作业
可执行程序工作原理 ELF目标文件格式 1.目标文件(ABI,应用程序二进制接口):编译器生成的文件. 2.目标文件的格式:out格式.COFF格式.PE(windows)格式.ELF(Linux)格 ...
- Apk反编译那些事
参考博客: https://blog.csdn.net/cbd_2012/article/details/91410119 https://mp.weixin.qq.com/s?__biz=MzI0N ...
- redis的数据类型和基本操作
Redis 的Key Redis 的 key 是字符串类型,但是 key 中不能包括边界字符,由于 key 不是 binary safe的字符串,所以像"my key"和" ...
- Mybatis运用到的3种设计模式
Mybatis运用到的3种设计模式 1.构造者模式2.工厂模式3.代理模式1.构造者模式 使用SqlSessionFactoryBuilder,根据核心配置文件,构造一个SqlSessionFacto ...