vue 计算属性实现过滤关键词
效果
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Vue计算属性-过滤</title>
<link rel="stylesheet" href="css/1.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="js/1.js"></script>
</head>
<body>
<div id="app">
<keep-alive>
<router-view class="child-view" v-if="$route.meta.keepAlive"></router-view>
</keep-alive> <router-view class="child-view" v-if="!$route.meta.keepAlive"></router-view>
</div>
<script type="text/x-template" id="page1">
<div>
<input type='text' class='searchInput' placeholder='输入名字查询' v-model='searchTxt'>
<table >
<tr class="blue">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr v-for='(list,index) in filteredArticles'>
<td>{{index+1}}</td>
<td>{{list.name}}</td>
<td>{{list.sex}}</td>
<td>{{list.year}}</td>
</tr>
</table >
<div class='NoMore'>
<span class='NoMoreTxt' id='NoMoreTxt'>已经到底部了</span>
</div>
</div>
</script>
</body>
</html>
1.js
$(document).ready(function() {
Vue.use(VueRouter);
// Page1 start
var Page1 = Vue.extend({
data() {
return {
searchTxt: '',
list: [{
name: '吴邪',
sex: '男',
year: '24'
},
{
name: '陈皮阿四',
sex: '男',
year: '50'
},
{
name: '云彩',
sex: '女',
year: '20'
},
{
name: '阿宁',
sex: '女',
year: '23'
}
],
}
},
computed: {
// 计算数学，匹配搜索
filteredArticles: function() {
var articles_array = this.list,
searchString = this.searchTxt;
if (!searchString) {
return articles_array;
}
searchString = searchString.trim().toLowerCase();
articles_array = articles_array.filter(function(item) {
if (item.name.toLowerCase().indexOf(searchString) !== -1) {
return item;
}
})
// 返回过来后的数组
return articles_array;;
}
},
template: "#page1",
watch: {
filteredArticles(newVal, oldVal) { //监控单个变量
var arr = newVal;
if (arr.length <= 0) {
$('#NoMoreTxt').text('暂无相关数据');
} else {
$('#NoMoreTxt').text('已经到底部了');
}
}
}
})
//Page1 end
var router = new VueRouter({
routes: [{
path: '/',
name: 'Page1',
meta: {
index: 0,
keepAlive: true,
title: '页面1'
},
component: Page1
}]
})
var app = new Vue({
el: '#app',
router
}).$mount('#app')
})
1.css
@CHARSET "UTF-8";
body {
width: 100%;
height: 100%;
}
body,
div,
p {
margin: 0;
padding: 0;
text-align: center;
}
.blue {
color: lightseagreen;
font-weight: bold;
}
table,
tr {
width: 100%;
}
.searchInput {
width: 60%;
height: 30px;
margin: 50px 0 20px 0;
border-radius: 10px;
padding-left: 10px;
outline: none;
border: 1px solid #111;
}
.p_list {
width: 100%;
display: flex;
margin: 20px 0;
}
.p_list span {
width: 25%;
display: inline-block;
}
.NoMore {
font-size: 14px;
color: #888;
margin-top: 30px;
text-align: center
}
.NoMoreTxt:before {
content: "";
width: 100px;
height: 1px;
display: inline-block;
margin-bottom: 5px;
margin-right: 1px;
background-color: #dadada;
}
.NoMoreTxt:after {
content: "";
width: 100px;
height: 1px;
display: inline-block;
background-color: #dadada;
margin-bottom: 5px;
margin-left: 10px;
}
vue 计算属性实现过滤关键词的更多相关文章
- Vue计算属性
github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...
- 在做vue计算属性，v-for处理数组时遇到的一个bug
bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
- vue 计算属性 实例选项 生命周期
vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...
- Vue计算属性缓存(computed) vs 方法
Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...
- Vue 计算属性 && 监视属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- Vue计算属性和监听属性
一.计算属性 计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app"> {{ mess ...
- 第三节：Vue计算属性
计算属性就是当其依赖的属性的值发生变化的时候,这个属性的值就会自动更新. 例子: <!DOCTYPE html> <html> <head> <meta ch ...
- Vue#计算属性
在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一 ...
随机推荐
- 压缩图片大小(Java源码)
/** * * 直接指定压缩后的宽高: * @param oldFile * 要进行压缩的文件 * @param width * 压缩后的宽度 * @param height * 压缩后的高度 * @ ...
- javafx教程大全
链接: https://www.yiibai.com/javafx
- kafk的数据消费快速的原因
kafka为什么消费数据很快呢? 1.数据的顺序读写 2.页缓存(操作系统层面) https://blog.csdn.net/gdj0001/article/details/80136364
- Greenplum（PostgreSql）函数实现批量删除表
项目做库迁移,前期需要经常调整表结构语句,涉及多次的批量drop,本着偷懒精神写了这个函数.鉴于本函数在生产环境有巨大风险,建议测试完毕后立即删除. 主要步骤很简单:1)从pg_tables查询得到相 ...
- 编译器报错: error LNK2001: unresolved external symbol "struct _ServiceDescriptorTable * KeServiceDescript
转自VC错误:http://www.vcerror.com/?p=10 问题描述: 编译器报错: error LNK2001: unresolved external symbol "str ...
- PMP-49个过程快速导览
启动过程组 名正言顺 人鬼佛神 01 -4.1制定项目章程 -授权PM,启动项目 ● 编写一份正式批准项目并授权项目经理在项目活动中使用组织资源的文件的过程 ● 明确项目与组织战略目标之间的联系,确立 ...
- C++之运算符重载（一元）
一.-符号重载 1.成员函数重载负号 2.友元函数重载负号 3.补充说明 <1> <一元运算符编码实现(一)>课程笔记: A:事实上,我们的重载运算符返回void.返回对象本身 ...
- unity 移动
上下左右平移 void Start() { QualitySettings.vSyncCount = ; Application.targetFrameRate = ;//控制帧数 } // Upda ...
- iOS开发之UIMenuController
1.简介 用于剪切.复制.粘贴.选择.选择ALL和DELETE命令的菜单界面. UITextField.UIWebView.UITextView自带有这种UIMenuController效果: 2.相 ...
- ElasticSearch 命令执行漏洞（CVE-2014-3120）
POST /_search?pretty HTTP/1.1 Host: your-ip:9200 Accept: */* Accept-Language: en User-Agent: Mozilla ...