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. ...
随机推荐
- zabbix目录
1.Linux实战教学笔记49:Zabbix监控平台3.2.4(一)搭建部署与概述 2.Linux实战教学笔记50:Zabbix监控平台3.2.4(二)深入理解zabbix 3.Linux实战教学笔记 ...
- 弱网测试-Network Emulator 网络模拟工具使用
参考链接 https://www.jianshu.com/p/6a3d38aafac1
- 从jsp到java文件再返回到前台页面的过程
客户端请求jsp页面总共分为三个阶段: <%@ page language="java" contentType="text/html; charset=utf-8 ...
- PHP+Mysql 实现数据库增删改查
PHP和Mysql可以对数据库进行简单的增删改查,本文介绍了新闻列表的后台管理. Mysql数据库创建 创建一个新闻列表的数据库: 1. 查询数据库 1.1. 创建文件dbconfig.php,保存常 ...
- Mac下开发ASP.NET Core应用，我用FineUICore！
在 Mac 下开发 ASP.NET Core 2.0+ 应用,我用FineUICore! FineUICore:企业级 ASP.NET 控件库,10年持续更新,只为你来:http://fineui.c ...
- ASP.NET Core 2.2 : 十六.扒一扒新的Endpoint路由方案
ASP.NET Core 从2.2版本开始,采用了一个新的名为Endpoint的路由方案,与原来的方案在使用上差别不大,但从内部运行方式上来说,差别还是很大的.上一篇详细介绍了原版路由方案的运行机制, ...
- QinQ 简介
QinQ 是一种二层隧道协议,通过将用户的私网报文封装上外层 VLAN Tag,使其携带两层 VLAN Tag 穿越公网,从而为用户提供了一种比较简单的二层VPN隧道技术.QinQ 的实现方式可分为两 ...
- Node.js中的console.log()输出彩色字体
转自:https://www.jianshu.com/p/cca3e72c3ba7 console.log('\033[42;30m DONE \033[40;32m Compiled success ...
- 【刷题】【LeetCode】总
参考资料 用动画的形式呈现解LeetCode题目的思路 目录: 000-十大经典排序算法 001-两数之和-easy 暴力法(遍历):两遍哈希表:一遍哈希表 002- 003- 004- 005- 0 ...
- PHP7.0-PHP7.3新特性与变更
到目前为止,PHP7发布已经升级到7.3,本文来总结一下每个版本的变更与新特性 PHP7.0 1. 组合比较符 (<=>) 组合比较符号用于比较两个表达式.当$a小于.等于或大于$b时它分 ...