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//  containif (item.name.includes(keywords)) {return item}})// return newList
            }}});</script>
</body>
</html>

转载于:https://www.cnblogs.com/CGWTQ/p/10940246.html

02-vue过滤器和键盘修饰符相关推荐

[Vue] : 键盘修饰符
键盘修饰符以及自定义键盘修饰符为文本框回车键绑定事件 <input type="text" class="form-control" v-model=& ...
Vue事件处理（事件修饰符，键盘事件）
Vue中的事件修饰符:1.prevent:阻止默认事件(常用)2.stop: 阻止事件冒泡(常用)3.once: 事件只触发一次(常用)4.capture: 使用事件的捕获模式5.self:只有eve ...
Vue学习：事件修饰符
当使用连接点击,触发默认事件时,会出现跳转,跳转是默认行为,可以取消 <div id='root'> <h2>欢迎页面,你好 {{name ...
[vue] 说说你对vue的表单修饰符.lazy的理解
[vue] 说说你对vue的表单修饰符.lazy的理解 input标签v-model用lazy修饰之后,vue并不会立即监听input Value的改变,会在input失去焦点之后,才会触发input ...
Vue中的事件修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...
Vue 事件绑定事件修饰符条件判断循环遍历
事件绑定 v-on:事件简写:@事件 <div id="app"><h2>{{counter}} </h2><button v-on:c ...
v-model的radio checkbox以及键盘修饰符使用
<div id ="app"> <input type="text" :value="msg" @input=" ...
Vue.js：按键修饰符keyup,keyup.enter,keyup.alt.enter的使用
学习Vue.js第三天键盘事件keyup <label>你所在城市:</label><input type="text" v-on:keyup=&q ...
Vue学习01-v-on事件修饰符
v-on事件修饰符: .stop:阻止标签的向外冒泡行为如div内部有个button,但是div和button都有点击事件.此时只希望点击按钮时触发按钮点击事件,不触发div点击事件,那么v-on: ...