过滤器
概念：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>
原文地址：https://www.cnblogs.com/CGWTQ/p/10940246.html
时间： 2024-07-30 23:40:48