02-vue过滤器和键盘修饰符
过滤器
概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；
-私有过滤器
- HTML元素：
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
2.私有 filters 定义方式：
filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用
dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
// 否则，就返回 年-月-日 时：分：秒
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}`;
}
}
}
-全局过滤器
// 定义一个全局过滤器
Vue.filter('dataFormat', function (input, pattern = '') {
var dt = new Date(input);
// 获取年月日
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
// 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
// 否则，就返回 年-月-日 时：分：秒
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.directive('on').keyCodes.f2 = 113;
2.x中自定义键盘修饰符
- 通过
Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：
Vue.config.keyCodes.f2 = 113;
2.使用自定义的按键修饰符：
<input type="text" v-model="name" @keyup.f2="add">
自定义指令
1.自定义全局和局部的 自定义指令
// 自定义全局指令 v-focus，为绑定的元素自动获取焦点：
Vue.directive('focus', {
inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
el.focus();
}
});
// 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色 和 字体粗细：
directives: {
color: { // 为元素设置指定的字体颜色
bind(el, binding) {
el.style.color = binding.value;
}
},
'font-weight': function (el, binding2) { // 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数
el.style.fontWeight = binding2.value;
}
}
2.自定义指令的使用方式：
<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">
案例：品牌列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>品牌列表</title>
<script src="./vue-2.4.0.js"></script>
<link rel="stylesheet" href="./bootstrap.min.css">
</head>
<body>
<div class="app"> <div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<lable>
ID: <input type="text" class="form-control" v-model="id">
</lable>
<lable>
Name: <input type="text" class="form-control" v-model="name">
</lable>
<input type="button" value="添加" class="btn btn-primary" @click="add(id)">
<lable>
search: <input type="text" class="form-control" v-model="keywords" id="search" v-focus>
</lable>
</div>
</div> <table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="list in search(keywords)" :key="list.id">
<td>{{list.id}}</td>
<td v-text="list.name"></td>
<td>{{list.ctime | dataFormat}}</td>
<td><a href="javascript:;" @click.prevent="del(list.id)">删除</a></td>
</tr>
</tbody>
</table>
</div> <script>
//自定义全局指令，调用时要以 v- 开头
// 参数一 ： 指令的名称
// 参数二 ： 是一个对象，指令的处理函数 // bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。(DOM元素可能没有被插入父节点)
//
// inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
//
// update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。 Vue.directive('focus',{
inserted:function (el) {
el.focus();
}
}); //全局过滤器
Vue.filter('dataFormat',function (dataStr) {
var dt = new Date(dataStr) ;
var y = dt.getFullYear();
var m = dt.getMonth() + 1;
var d = dt.getDate();
var h = dt.getHours();
var mi = dt.getMinutes();
var s = dt.getSeconds();
//模板字符串
return `${y}-${m}-${d} ${h}:${mi}:${s}`;
});
var vm =new Vue({
el:'.app',
data:{
id:'',
name:'',
keywords:'',
list:[
{id:1,name:'奔驰',ctime:new Date()},
{id:2,name:'宝马',ctime:new Date()},
]
},
methods:{
add(id){
var index = this.list.findIndex(item => {
if(id == item.id){
alert("ID重复");
this.id =this.name ='';
}else if(id == ''){
alert("ID为空")
} else{
var car ={id: this.id,name: this.name,ctime:new Date()};
this.list.push(car);
this.id =this.name ='';
}
return true;
}) },
del(id){ //方法一：
//some() 方法测试是否至少有一个元素通过由提供的函数实现的测试
// this.list.some((item,i) => {
// if(item.id == id){
// //splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容
// this.list.splice(i,1);
// return true;
// }
// }); //方法二：
//findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引
var index = this.list.findIndex(item => {
if(item.id == id){
return true;
}
});
this.list.splice(index,1); },
search(keywords) { // 根据关键字，进行数据的搜索 // 都会对数组中的每一项，进行遍历，执行相关的操作；
return this.list.filter(item => {
// if(item.name.indexOf(keywords) != -1) // 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串')
// 如果包含，则返回 true ，否则返回 false
// contain
if (item.name.includes(keywords)) {
return item
}
}) // return newList
}
}
}); </script>
</body>
</html>
02-vue过滤器和键盘修饰符的更多相关文章
- Vue 监听键盘,键盘修饰符keyup
附录:键盘Key Code对照表 代码: <!doctype html> <html lang="en"> <head> <meta ch ...
- [Vue] : 键盘修饰符
键盘修饰符以及自定义键盘修饰符 为文本框回车键绑定事件 <input type="text" class="form-control" v-model=& ...
- Vue学习笔记【13】——键盘修饰符以及自定义键盘修饰符
1.x版本中自定义键盘修饰符[了解] Vue.directive('on').keyCodes.f2 = 113; 2.x版本中自定义键盘修饰符 通过Vue.config.keyCodes.名称 = ...
- vue.js_06_vue.js的自定义指令和自定义键盘修饰符
1.全局的自定义指令 实现:当页面刷新时,光标聚焦到搜索框中 <label> 搜索: <input type="text" class="form-co ...
- vue--键盘修饰符以及自定义键盘修饰符
键盘修饰符以及自定义键盘修饰符 1.vue键盘修饰符[了解即可] 地址:https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4 ...
- [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)
preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...
- vue中的.passive修饰符
一.passive作用 详情请参考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中 ...
- 从零开始学 Web 之 Vue.js（二）过滤器，按键修饰符，自定义指令
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- VUe键盘修饰符及自定义指令获取焦点
首先需要在keyup事件之后. 修饰符 来绑定事件 <body> <div class="box"> <!-- 这里的 @keyup.enter=&q ...
随机推荐
- Linux命令学习(2): scp和rsync基本用法与断点续传
版权声明:本文为博主原创文章,未经允许不得转载. 引子 在平常的工作中,我经常需要在远程服务器和本地之间传输文件. 以前我都使用scp命令,直到今天因为网络中断,scp出现了stalled. 因为上传 ...
- wannafly-day1 Problem B-Board
思路:这个题队友过的,我的思路是枚举行和列,将除了要求位置初始0,每行最小值相减,每列最小值相减,直到除了要求的位置,别的位置都为零,则那个位置取绝对值就行了,有点麻烦应该能过,但是他没有用我给的想法 ...
- Python基础(四) 基础拾遗、数据类型进阶
一.基础拾遗 (一).变量作用域 外层变量,可以被内层变量直接调用:内层变量,无法被外层变量使用.这种说法在其它语言中适用,在python中除了栈以外,正常的变量作用域,只要执行声明并在内存中存在,该 ...
- [linux]centos7下解决yum install mysql-server没有可用包
第一步:安装从网上下载文件的wget命令 [root@master ~]# yum -y install wget 第二步:下载mysql的repo源 [root@master ~]# wget ht ...
- 关于zookeeper和zkfc的一些测试
1.停掉zookeeper集群 ****进程影响****** zkfc:报错无法连接zookeeper.ClientCnxn java.net.connectexception:拒绝连接,但不会shu ...
- Git——跟踪或取消跟踪文件
在Git是用过程中,可能遇到以下情况: 1.被跟踪文件里面有不想跟踪的文件. 2.每次用git status查看状态时总是列出未被跟踪的文件. 解决方法: 1.当被跟踪的文件里面有不想跟踪的文件时,使 ...
- IE 浏览器证书错误常见问题解答
有时,你将看到下表的错误消息,比如,此网站的安全证书已经被吊销等等,说明网站的安全证书有问题. 站点的证书允许 Internet Explorer 与站点建立安全连接. SSL证书出现错误有时是证书本 ...
- 使用pymongo.find查询很慢的解决方式
1.前言: mongodb部署在阿里云服务器, mongodb中collection存储了百万条记录. 需求:优化查询指定时间段内的所有数据的查询时间,结果有百万级别. 最初:313587条记录耗时: ...
- 由文字生成path后制作写字的动画
在看以下这个开源组件的时候,发现一个非常棒的方法,能够将文字生成path,这样就能够作出用笔写字的效果了. https://github.com/MP0w/MPParallaxCollection 关 ...
- Android Studio底边栏选项不见了，怎样调出来
Android Studio底边有一个选项栏,包括了Run,Android等等非常多的选项,可是假设你一不小心不知道自己点到哪个地方了.底边选项栏不见了,怎样调出来.非常easy.例如以下图.地边栏不 ...