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 ...
随机推荐
- css之盒模型（box,box-shadow,overflow,BFC）
一.盒模型的概念 CSS中每一个元素都是一个盒模型(Box Model),包括HTML和body标签元素.一般称之为box model.它的本质就是一个盒子,它的属性有margin,border,pa ...
- 关于swiper 4的coverflowEffect（3d）
轮播效果: HTML: <div class="swiper-container successful_swiper"> <div class="swi ...
- zabbix-server、proxy、agent的分布式部署步骤
1.准备工作 关闭防火墙和SELinux防火墙,因为他们会限制一些访问权限,如果服务器不能关闭就需要手动设置规则,这里测试用就直接关闭了 service firewalld stop; setenfo ...
- SQL函数取汉字拼音首字母
)='') ) as begin ), ) , ,) if @chn > 'z' if( @chn < '八' ) set @c = 'A' else if ( @chn < '嚓' ...
- jenkins插件管理提示“update information obtained：不可用ago”
jenkins插件管理遇到两个错误 (1)插件管理页面提示:There were errors checking the update sites:IOException:Unable to tunn ...
- Summer training round2 #1
A:水 B:求两个三角形之间的位置关系:相交 相离 内含 ①用三个点是否在三角形内外判断 计算MA*MB.MB*MC.MC*MA的大小 若这三个值同号,那么在三角形的内部,异号在外部 #incl ...
- java调用js函数
问题:js函数可能有多个,之间有相互调用关系,有jquery jar包 org.mozilla.javascript-1.7.2 js envjs-1.2.js java代码 import jav ...
- 使用SpringAOP实现事务（声明式事务管理、零配置）
前言: 声明式事务管理建立在AOP之上的.其本质是对方法前后进行拦截,然后在目标方法开始之前创建或者加入一个事务,在执行完目标方法之后根据执行情况提交或者回滚事务.声明式事务最大的优点就是不需要通过编 ...
- 算法复习-P NP NPC NP-hard概念
from http://blog.csdn.net/huang1024rui/article/details/49154507 P.NP.NPC和NP-Hard相关概念的图形和解释 一.相关概念 P: ...
- 如何在输入命令行npm run dev 之后vue项目自动在浏览器打开
使用代码编辑器打开vue项目代码,在config文件夹里面找到index.js 将里面的:autoOpenBrowser: false, 修改为 :autoOpenBrowser: true, 这个方 ...