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 ...
随机推荐
- C语言字符串函数总结
原文链接 函数名: stpcpy 功 能: 拷贝一个字符串到另一个 用 法: char *stpcpy(char *destin, char *source); 程序例: #include <s ...
- jquery做的滑动按钮开关
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- deep_learning_Function_tf.train.ExponentialMovingAverage()滑动平均
近来看batch normalization的代码时,遇到tf.train.ExponentialMovingAverage()函数,特此记录. tf.train.ExponentialMovingA ...
- Fatal Error: Out of memory php内存溢出处理三种方法
有时候我们在运行php程序的时候会发现 Fatal Error: Out of memory 这样的提示,这有可能是程序中用到了大量了变量和对象,导致分配的内存不够用. 修改php.ini文件里的me ...
- Thumbnailator 缩略图
Thumbnailator 是一个为Java界面更流畅的缩略图生成库.从API提供现有的图像文件和图像对象的缩略图中简化了缩略过程,两三行代码就能够从现有图片生成缩略图,且允许微调缩略图生成,同时保持 ...
- mysql 在gtid环境下缺少一部分binlog部署从库
我的环境: 有两台linux服务器 一台是192.168.1.1 mysql 端口3301 一台是192.168.1.2 mysql 端口3303 要讨论如何恢复从库,我们得先来了解如下一些概 ...
- k8sDeployment控制器
简写为deploy,是k8s控制器的另一种实现,它构建于ReplicaSet之上,可为pod和rs资源提供声明式更新. deploy控制器资源的大部分功能均可通过调用rs来实现,同时,还增添了部分特性 ...
- 测试网站接口,nginx篇
nginx是反向代理,怎么通过nginx反向代理要测试接口的线上网站呢. 这里自我提供了一个方法,仅供参考!建议不要用于刷接口等非常规的用途,后果会很严重. 首先 用node express创建一个项 ...
- iview响应式布局
我想说,我要被逼成前端了. 之前没接触过响应式,这两天和另一位前端程序媛小小的研究了下.做了一个小例子,记录一下,方便以后使用. <template> <div> <Ro ...
- Flash大文件断点续传功能
一.概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content- ...