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 将绑定表达式限制为一个表达式.如果需要多于一 ...
随机推荐
- Delphi exe实例之间传递cmd参数
{Unit1.pas} 通过这个单元的Button,调用另一个实例: procedure TForm1.Button1Click(Sender: TObject); begin ShellExecut ...
- TYVJ1061 Mobile Service
P1061 Mobile Service 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 一个公司有三个移动服务员.如果某个地方有一个请求,某个员工必须赶到那 ...
- poj 3254 Corn Field
Description Farmer John has purchased a lush new rectangular pasture composed of M by N (1 ≤ M ≤ 12; ...
- npm run 同时执行多个命令
在项目中可能需要一套代码同时部署几套环境,每一次改动就需要同时打包N次.这时就需要能够一个命令同时打包多次,省去了很多麻烦. 这里我们需要用到 concurrently 这个 npm 包,能够实现我们 ...
- LightOJ-1253-Misere Nim-nim博弈
Alice and Bob are playing game of Misère Nim. Misère Nim is a game playing on k piles of stones, eac ...
- 剑指offer——20删除链表中重复的结点
题目描述 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理后 ...
- ECMAScript1.4 对象 | 简单数据类型与复杂数据类型 | 内置对象 | 基本包装类型 | String
对象 函数和对象的区别: 函数:封装代码 对象:封装属性和方法 创建对象的方法: 1,对象字面量{} // 模拟创建一只dog var dog = { // 属性 name: 'puppy', age ...
- linux下使用scp在服务器之间拷贝文件 (转载)
CentOS, 本地服务器,ip: 192.168.1.111Ubuntu, 远程服务器,ip: 192.168.1.112 1.拷贝远程服务器的目录到本地服务器远程服务器192.168.1.112上 ...
- haproxy Mycat集
8-1 镜像haproxy docker run -it --privileged --name haproxy docker.io/centos:latest 8-2wget http://w ...
- iOS开发系列-Shell脚本生成IPA
概述 在公司开发到了测试阶段需要频繁打包交付给测试,看似简单的工作,重复的流程总是感觉不是那么好,我们可以借助苹果提供的编译指令编译项目. 自动化脚本编译打包IPA 常见的iOS项目就是基于xcode ...