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. ...
随机推荐
- Linux：Day9(上) 压缩工具
压缩.解压缩及归档工具 compress/uncompress:.Z # 现在已经很少在见到了 gzip/gunzip:.gz bzip2/bunzip2:.bz2 xz/unxz:.xz # 目前推 ...
- Java异步NIO框架Netty实现高性能高并发
原文地址:http://blog.csdn.net/opengl_es/article/details/40979371?utm_source=tuicool&utm_medium=refer ...
- 使用 ng build 构建后资源地址引用错误的问题
最近使用 Angular 做项目的时候,通过 ng build 打包后的资源地址都带有 localhost:4200,百思不得其解,以为是打包的问题. 最后在 index.html 的文件中发现有一个 ...
- Python--day09（内存管理、垃圾回收机制）
昨天内容回顾 1. 操作文件的三个步骤: 1. 打开文件:硬盘的空间被操作系统持有,文件对象被用用程序持续 2. 操作文件:读写操作 3. 释放文件:释放操作系统对硬盘空间的持有 2. 基础 ...
- centos6.8 安装jenkins
1.使用yum安装java环境 #查看CentOS自带JDK是否已安装yum list installed |grep java #查看yum库中的Java安装包yum -y list java*#以 ...
- vue动态设置初始页
- CSS中的opacity，不透明度的坑
opacity的用法示例如下 /* 值是0到1之间的数值 */ opacity:0.5 opacity设置在元素上的时候,会出现什么效果? 答曰:如果不设置opacity的话,会显示效果为A(可以理解 ...
- A Base Class pointer can point to a derived class object. Why is the vice-versa not true?
问题转载自:https://stackoverflow.com/questions/4937180/a-base-class-pointer-can-point-to-a-derived-class- ...
- 安装php的lavavel框架的流程（亲测）
windows上安装配置laravel 初次接触laravel会觉得它的安装方式比较不一样,与Linux上安装软件的方式很相似. 学习laravel的最好方式当然是看官方文档,笔者就在这里讲官方文档上 ...
- 【BZOJ3997】[TJOI2015]组合数学（动态规划）
[BZOJ3997][TJOI2015]组合数学(动态规划) 题面 BZOJ 洛谷 题解 相当妙的一道题目.不看题解我只会暴力网络流 先考虑要求的是一个什么东西,我们把每个点按照\(a[i][j]\) ...