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. ...
随机推荐
- selenium跳过webdriver检测并爬取天猫商品数据
目录 简介 编写思路 使用教程 演示图片 源代码 @(文章目录) 简介 现在爬取淘宝,天猫商品数据都是需要首先进行登录的.上一节我们已经完成了模拟登录淘宝的步骤,所以在此不详细讲如何模拟登录淘宝.把关 ...
- 类String 常用方法
字符串当中的常用方法之比较相关的方法 public boolean equals (object obj):将此字符串与指定的对象进行比较(只有参数是字符串并且内容相同才会返回true) public ...
- Django后端向前端直接传html语言防止转义的方法(2种)
Django后端向前端直接传html语言防止转义的方法(2种) 目的,为了让前端对后端传输的这种方式不转义 1.使用mark_safe() from django.utils.safestring i ...
- git异常操作解决办法合集
1. git add .后发现提交错误,想撤销 git reset head 文件名-----撤销某个文件 git reset head --hard 强制撤销当前的所有操作到上次提交的版本 2. g ...
- 调用webservice帮助类
using System;using System.CodeDom;using System.CodeDom.Compiler;using System.Collections.Generic;usi ...
- hdu-4612(无向图缩点+树的直径)
题意:给你n个点和m条边的无向图,问你如果多加一条边的话,那么这个图最少的桥是什么 解题思路:无向图缩点和树的直径,用并查集缩点: #include<iostream> #include& ...
- Linux odoo开发环境配置
Linux odoo开发环境配置 安装postgresql9.6 第1步:添加RPM源(通过官网获取下载地址) yum install https://download.postgresql.org/ ...
- Ubuntu 16.04 安装opencv3.4.5/cuda/caffe并使用jni笔记
因操作失误,误卸开发机NVIDIA显卡驱动,先更新操作日志如下: 1>NVIDIA驱动重装 1.卸载系统里的Nvidia残余 sudo apt-get purge nvidia* 2.把显卡驱动 ...
- 钉钉相关功能介入开发系列一：获取access_token
获取access_token的基本代码,与微信不同的是钉钉的token正常情况下有效期为7200秒,有效期内重复获取返回相同结果,并自动续期,比微信方便多了 //基本信息 string appkey ...
- P1282 多米诺骨牌 (背包变形问题)
题目描述 多米诺骨牌有上下2个方块组成,每个方块中有1~6个点.现有排成行的 上方块中点数之和记为S1,下方块中点数之和记为S2,它们的差为|S1-S2|.例如在图8-1中,S1=6+1+1+1=9, ...