vue 前端框架 (二) 表格增加搜索
本章知识点 归纳:
1.定义全局过滤器 以及 私有过滤器
2.定义全局指令 以及 定义私有指令
3.定义键盘修饰符
4.v-for 的函数引入
5.字符串的incluede 方法,.toString().padStart(2,'0') 的字符串补全方法
6.通过过滤器定义日期格式
需要vue.js 以及 bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/vue.js"></script>
</head>
<body>
<!--
过滤器
vue允许你自定义过滤器,可被用作一些常见文本格式化,过滤可以用在两个地方,
mustachc差值 , v-bind表达式,过滤器应该添加在javascript 表达式的尾部,由管道符指示 过滤器分为 全局过滤器以及私有过滤器
全局过滤拉起是定义在script中
而私有过滤器是定义在vue实例当中的 filters 方法中的 定义过滤器 有两个条件[过滤器名称和处理函数]
过滤器调用的时候,采用的就近原则,如果私有过滤器和全局过滤器名称一致了,
这时候优先调用私有过滤器 --> <div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="pannel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
ID:
<input type="text" class="form-control" v-model="id">
</label>
<label>
Name:
<!-- <input type="text" class="form-control" v-model="name" @keyup.enter="add"> --> <!-- keyup.113 113对应F2 的键盘码 -->
<!-- <input type="text" class="form-control" v-model="name" @keyup.113="add"> --> <input type="text" class="form-control" v-model="name" @keyup.f2="add"> </label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label>
Search:
<input type="text" class="form-control" v-model="searchname" v-focus v-color='"blue"'>
</label>
</div>
</div>
<br>
<table class="table table-bordered table-hover table-striped">
<tr>
<th><input type="checkbox"></th>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>action</th>
</tr>
<tr v-for='i in search(searchname)' :key='i.id'>
<td><input type="checkbox"></td>
<td >{{i.id}}</td>
<td v-color='"blue"'>{{i.name}}</td>
<td >{{i.ctime | dateformat }}</td>
<td ><a href="#" @click.prevent="del(i.id)">删除</a></td>
</tr>
</table>
<br> </div> <div id='app2'>
{{msg|infodata}}
</div> <script>
// 全局过滤器 定义以及使用
Vue.filter('dateformat',function(datestr,pattern=''){
var dt = new Date(datestr)
var y = dt.getFullYear()
var m = dt.getMonth()+1
var d = dt.getDate().toString().padStart(2,'0')
// return y+'-'+ m +'-'+ d if(pattern.toLowerCase() === 'yyyy-mm-dd'){
return `${y}-${m}-${d}`
}else{
var hh = dt.getHours().toString().padStart(2,'0')
var mm = dt.getMinutes().toString().padStart(2,'0')
var ss = dt.getSeconds().toString().padStart(2,'0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
}); // 1.X 版本的 自定义全局键盘码(键盘修饰符)
Vue.config.keyCodes.f2 = 113; // 使用Vue.directive()定义全局的指令 v-focus
Vue.directive('focus',{
// 和行为有关的操作交给inserted操作
inserted(el){
el.focus()
},
}) Vue.directive('color',{
//跟样式有关的可以交给bind操作
bind(el,binding){
el.style.color = binding.value
}
})
// 使用directive() 定义全局的指令
// 其中参数:
// 1.指令名称,注意在定义的时候,指令的名称前面,都不要加v-前缀,但是调用的时候必须在指令名称前面加上v- 前缀进行调用
// 2.对象,这个对象身上,有一些指令的函数,这些函数可以在特定的阶段,执行相关的操作
// 对象中,5个钩子函数:
// bind,inserted,updated,componentUpdated,unbind // 钩子函数参数:
// el,binding( name,value,oldvalue,expression,arg modifiers ),vnode,oldvnode // 实例一
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
searchname:'',
list:[
{id:1,name:'alex',ctime:new Date()},
{id:2,name:'anex',ctime:new Date()},
{id:3,name:'aexk',ctime:new Date()},
],
msg:'abc',
},
methods:{
add(){
this.list.push({id:this.id,name:this.name,ctime:new Date})
this.name = this.id = ''
},
del(id){ // 方式一(循环list比对值)
// this.list.some((item,i)=>{
// if(item.id == id){
// this.list.splice(i,1)
// return true;
//
// // .splice(a,b,c)
// // 参数a为下标值,参数b为步长,参数c为替换的值
// }
// }) // 方式二(查找对应的值得方法)
var index = this.list.findIndex(i =>{
if(i.id == id){
return true
}
})
this.list.splice(index,1)
},
search(searchname){ // // 方式一
// var newlist = []
// this.list.forEach(k => {
// if(k.name.indexOf(searchname) != -1){
// newlist.push(k)
// }
// })
// return newlist // 方式二
return this.list.filter(k => {
if(k.name.includes(searchname)){
return k
}
}) // 注意:forEach some filter findIndex 这些都属于数组的新方法,
// 都会对数组中的每一项 进行遍历 执行相关的操作
//
// ES6 中 为了字符串提供了一个新方法,叫做 String.prototype.includes(包含字符串)
// 包含 则返回 true
// 不包含 则返回 false },
},
directives:{
'color0':{
bind(el,bd){
el.style.color = db.value
}
},
}, }) // 实例二
var vu = new Vue({
el:'#app2',
data:{
msg:'ahello !',
},
methods:{ }, // 私有过滤器(局部过滤器)
filters:{
infodata(msg){
return msg.replace('a','b')
},
}
}) </script>
</body>
</html>
vue 前端框架 (二) 表格增加搜索的更多相关文章
- 2.VUE前端框架学习记录二
VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...
- vue 前端框架 目录
vue 前端框架 目录 vue-目录 ES6基础语法 vue基础语法 Vue.js的组件化思想 —上 Vue.js的组件化思想 —下 Vue + Vue-Router结合开发 SublimeSer ...
- 4.VUE前端框架学习记录四：Vue组件化编码2
VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 3.VUE前端框架学习记录三：Vue组件化编码1
VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 1.VUE前端框架学习记录一
VUE前端框架学习记录一文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/file/f0 ...
- Vue前端框架基础+Element的使用
前置内容: AJAX基础+Axios快速入门+JSON使用 目录 1.VUE 1.1 概述 1.2 快速入门 1.3 Vue指令 1.3.1 v-bind & v-model 指令 1.3.2 ...
- 自动化测试平台（Vue前端框架安装配置）
Vue简介: 通俗的来说Vue是前端框架,用来写html的框架,可轻量级也可不轻量级 Vue特性: 绑定性,响应性,实时性,组件性 安装软件以及控件: 控件库:element-ui node.js ( ...
- vue 前端框架 (三)
VUE 生命周期 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- vue 前端框架
什么是vue.js 1.vue是目前最火的一个前端框架,react 是最流行的前端框架(react除了开发网站,还可以开发手机APP,vue语法也是可以进行手机app开发的,需要借助于weex) 2. ...
随机推荐
- windows 和linux 路径解析的区别
windows下使用的是“\”作为分隔符,而linux则反其道而行之使用"/"作为分隔符.所以在windows 环境中获取路径常见 C:\windows\system 的形式,而l ...
- SpringBoot整合Redis及Redis工具类撰写
SpringBoot整合Redis的博客很多,但是很多都不是我想要的结果.因为我只需要整合完成后,可以操作Redis就可以了,并不需要配合缓存相关的注解使用(如@Cacheable). ...
- Nginx+Django-Python+BPMN-JS的整合工作流实战项目
前言 找一个好用的画图工具真心不容易,Activiti 工作流自带的 Web 版画图工具,外表挺华丽,其实使用起来各种拧巴:Eclipse 的 Activiti 画图插件,对于相对复杂的流程也是很不友 ...
- [kuangbin带你飞]专题二十二 区间DP-B-LightOJ - 1422
题意大概是这样,第i天必须穿a[i](某一种类)的衣服,你可以套着穿很多件,对于第i天,你有两种操作,一种是脱掉现在的衣服,一种是穿上新的一件,但是你脱掉的衣服,以后不能再穿.问最少需要多少件衣服? ...
- 企业出口退税申报系统的Sqlite数据库破解及读写
QQ:564955427 原始出处:https://www.cnblogs.com/Charltsing/p/TSSB.html 最近一些朋友反映龙图的企业出口退税申报系统的Sqlite数据库改变了加 ...
- 虚拟机网络连接方式导致的p地址为10.0.2.*的问题
全世界都知道通过 ifconfig 命令查看本机ip地址,我当然希望安装的虚拟机和当前局域网的其他机器一样内网ip为192.168.1.*,如下图所示: 而当我执行该命令时,实际情况却是这样的: 解决 ...
- arale-cookie 使用
https://www.npmjs.com/package/arale-cookie arale-cookie 使用 define(function() { var Cookie = require ...
- 关于Eclipse使用Git基础篇
一:Git的下载与安装与基本使用 1.打开eclipse->help->Eclipse Markplace->search->fiind输入Egit 你会看到如下截图(我的为已 ...
- jquery笔记整理
01-jquery简介 1)功能: ·html元素选取 ·Html元素操作 ·Css操作 ·Html事件函数 ·JavaScript特效和动画 ·DOM ...
- Mac OSX下安装dlib （Python）
1.在安装Dlib库之前需要安装的库:opencv,numpy 2.安装Xquartz2.7.11 Xquartz是执行Unix程序的图形窗口环境,为了兼容Unix和Linux下移植过来的程序就需要安 ...