024——VUE中filter的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE中filter的使用</title>
<script src="vue.js"></script>
</head>
<body>
<div id="lantian">
<ul v-for="v in news">
<li>{{v.cont}}</li>
</ul>
<input type="text" v-on:keyup.enter="search" v-model="searchCon">
</div>
<script>
var app = new Vue({
el: '#lantian',
data: {
searchCon:'',
news: [
{'id': 5, 'cont': 'HD测试五'},
{'id': 1, 'cont': '测hd试一'},
{'id': 4, 'cont': '测试四'},
{'id': 3, 'cont': '测试Hd三'},
{'id': 2, 'cont': '测试二'}
]
},
methods: {
search:function () {
this.news=this.news.filter((item)=>{
var reg=new RegExp(this.searchCon,'i');
return reg.test(item.cont);
});
} }
});
</script>
</body>
</html>
024——VUE中filter的使用的更多相关文章
- vue中filter的用法
test() { var arr1 = ["A", "B", "C","C","A"]; var r ...
- vuex中filter的使用 && 快速判断一个数是否在一个数组中
vue中filter的使用 computed: mapState({ items: state => state.items.filter(function (value, index, arr ...
- vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- vue 中全局filter过滤器的配置及使用
在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- vue中在页面渲染完之后获取元素（否则动态渲染的元素获取不到）
两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...
- vue中修改了数据但视图无法更新的情况[转载]
我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...
- vue中excel导入导出组件
vue中导入导出excel,并根据后台返回类型进行判断,导入到数据库中 功能:实现js导入导出excel,并且对导入的excel进行展示,当excel标题名称和数据库的名称标题匹配时,则对应列导入的数 ...
- Vue中计算属性、侦听、过滤、自定义指令、ref的操作
1.计算属性 <div id="app"> <input type="text" v-model="x"> < ...
随机推荐
- 2017浙江省赛 E - Seven Segment Display ZOJ - 3962
地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3962 题目: A seven segment display, or ...
- Winter-1-D Max Sum 解题报告及测试数据
Time Limit:1000MS Memory Limit:32768KB Description Given a sequence a[1],a[2],a[3]......a[n], your j ...
- Java中的JDBC是什么?
JDBC(Java Data Base Connectivity, Java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它有一组用Java语言编写的类和接 ...
- win 7 64 安装 tensorflow
1:安装 python 3.5 2. 安装 pip 3: 安装 tensorflow 4,demo
- Redis 数据结构-字符串源码分析
相关文章 Redis 初探-安装与使用 Redis常用指令 本文将从以下几个部分进行介绍 1.前言 2.常用命令 3.字符串结构 4.字符串实现 5.命令是如果操作字符串的 前言 平时在使用 Redi ...
- 为什么Eureka Client获取服务实例这么慢
1. Eureka Client注册延迟 Eureka Client启动后不会立即向Eureka Server注册,而是有一个延迟时间,默认为40s 2. Eureka Server更新响应缓存 Eu ...
- keepalived结合lvs
ip划分: RS1:192.168.223.135 RS2:192.168.223.137 节点node1和node2的keepalived(node1:192.168.223.136,node2:1 ...
- 20145314郑凯杰 《Java程序设计》第2周学习总结 代码开始!
---恢复内容开始--- 20145314郑凯杰 <Java程序设计>第2周学习总结 代码开始! 教材学习内容总结 跟着教材的顺序开始总结我学过的内容: 1编辑.编译.运行教材上代码 这部 ...
- P(Y|X) 和 P(X,Y)
P ( x | y ):在Y发生的条件下,X发生的概率.P ( x , y )P(x,y)说明该事件与两个因素有关,比如设是因素A,B.P(x,y)=P{因素A处于x状态,因素B处于y状态}确切地说P ...
- rocketMQ基本理解
消息中间件需要解决哪些问题? Publish/Subscribe 发布订阅是消息中间件的最基本功能,也是相对于传统RPC通信而言. Message Priority 规范中描述的优先级是指在一个消息队 ...