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 ...
随机推荐
- multipart/form-data请求与文件上传的细节
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- Java定义栈结构,实现入栈、出栈操作
package com.example.demo; import java.util.ArrayList; public class Stack { ArrayList<Object> l ...
- 5.flask与数据库
1.安装postgresql 注意:在flask中,操作数据库还是通过orm调用驱动来操作.sqlalchemy是python下的一款工业级的orm,比Django自带的orm要强大很多,至于什么类型 ...
- 关于windows下无法删除文件,需要TrueInstaller权限的问题
笔者办公室的笔记本今天突然弹出来一个ie浏览器,这不是为了下载其他浏览器而存在的浏览器吗?现在还臭不要脸的弹出来,然鹅我在删除文件夹的时候,提示我无法删除,必须要有TrueInstaller的权限,那 ...
- c++字符串的输入
先声明一下字符串的初始化:当初始赋值的时候一定是反斜杠0(\0)有三种方式“”,{‘\0’}."\0"(如果是已经赋值的我们可以采用memset(recvbuf, '\0', si ...
- Java语言基础(6)
1 while循环 案例:Demo1 1+2+3+4+5+...+100 = ? 首先定义一个变量sum,用来保存累加之和,int sum=0 第1次:sum = sum + 1 第2次: sum = ...
- 标准C语言(8)
指针变量用来记录地址数据,指针变量的用途就是找到另外一个变量,没有记录有效地址的指针不能用来找到其它变量,声明指针变量时必须在变量名称前写*.如果一个指针变量记录了另外一个变量的地址就可以认为它们之间 ...
- const与constexpr
关于const型数据,谭浩强老爷子这么总结道: Time const t; //t是常对象,其值在任何情况下都不能改变 void Time::fun()const; //fun是Time类中的常成员函 ...
- Hive 常用命令
1.hive模糊搜索表 show tables like '*name*'; 2.查看表结构信息 desc formatted table_name; desc table_name; 3.查看分 ...
- 使用IDEA搭建一个Spring + Spring MVC 的Web项目(零配置文件)
话不多说,直接上代码: 注解是Spring的一个构建的一个重要手段,减少写配置文件,下面解释一下一些要用到的注解: @Configuration 作用于类上面,声明当前类是一个配置类(相当于一个Spr ...