自定义过滤器
语法
Vue.filter("过滤器1名称",function('原数据','arg1','arg2'){return 过滤数据;})Vue.filter("过滤器2名称",function('原数据','arg1','arg2'){return 过滤数据;})
使用
<span>{{ "原数据"|过滤器1名称(arg1,arg2)|过滤器2名称(arg1,arg2) }}</span>
注意
vue 过滤器 只能 再 v-bind 和 v-text 中使用
自定义按键
语法
Vue.config.keyCodes.f2 = 113;
使用
<input type="text" @keyup.f2="add"/>
自定义指令
语法
// 参数1：指令名称 参数2：是一个对象Vue.directive('focus',{// 自定义指令函数中第一个参数永远是el// el表示被绑定指令的那个元素// el是一个原生的js对象 元素可以干什么el就可以干什么bind:fucntion(el){//当指令绑定到元素上的时候执行该方法 只执行一次}，inserted:function(el){// 元素插入到dom的使用执行该方法 只执行一次},updated:function(el){// 当VNode更新的时候执行该方法 可能执行多次}})
使用
<input type="text" v-focus/>
综合实例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="/npm/vue@2.5.17/dist/vue.js"></script><link href="/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></head><body><div id="app"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">嘿嘿嘿,美女哟~~~</h3></div><div class="panel-body form-inline"><label>id<input type="text" v-model="id" @focus="hiddenMsg"></label><label>姓名<input type="text" v-model="name" @keyup.f2="add"></label><label>生日<input type="text" v-model="birthday"></label><button @click="add">添加</button><label>姓名模糊查询<input type="text" v-model="keyword" placeholder="请输入关键字" v-focus></label></div></div><table class="table table-bordered table-hover table-striped"><thead><tr><th>id</th><th>姓名</th><th>生日</th><th>操作</th></tr></thead><tbody><tr v-for="item in search(keyword)" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.birthday|dateFormate("yyyy-MM-dd")}}</td><td><a href="" @click.prevent="del(item.id)">删除</a></td></tr></tbody></table><h3>{{msg}}</h3></div><script>//自定义时间过滤器Vue.filter('dateFormate', function (datetime,fmt) {if (parseInt(datetime) == datetime) {if (datetime.length == 10) {datetime = parseInt(datetime) * 1000;} else if (datetime.length == 13) {datetime = parseInt(datetime);}}datetime = new Date(datetime);var o = {"M+": datetime.getMonth() + 1, //月份"d+": datetime.getDate(),//日"h+": datetime.getHours(), //小时"m+": datetime.getMinutes(), //分"s+": datetime.getSeconds(), //秒"q+": Math.floor((datetime.getMonth() + 3) / 3), //季度"S": datetime.getMilliseconds() //毫秒};if (/(y+)/.test(fmt))fmt = fmt.replace(RegExp.$1, (datetime.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp("(" + k + ")").test(fmt))fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));return fmt;});// 自定义f2按键Vue.config.keyCodes.f2 = 113;// 自定义focus指令Vue.directive('focus',{inserted:function (el) {el.focus();}});// vue实例var vm = new Vue({el: '#app',data: {id: '',name: '',birthday: '',keyword: '',list: [{id: '1', name: '马思纯', birthday: '1992-09-09'},{id: '2', name: '李小冉', birthday: '1990-01-19'},],msg: ''},methods: {// 添加方法add() {var girl = {id: this.id,name: this.name,birthday: this.birthday == "" || this.birthday == null ? new Date() : this.birthday,};var falg = true;// some循环方法 this.list.some((item, i) => {if (item.id == "" || item.id == null || item.id === this.id) {this.msg = "嘿嘿嘿,id不能重复呦~~";falg = false;return true;}});if (falg) {this.list.push(girl);this.msg = "";}},// 删除方法del(id) {// 循环 查找索引方法 findIndexvar index = this.list.findIndex(item => {if (item.id === this.id) {return true;}});this.list.splice(index, 1);},// 消息提示hiddenMsg() {this.msg = "";},// 搜索方法search(keyword) {/** 指令会自动的调用方法 如果有返回值 那么会返回给使用指令的地方 指令里的方法* 如果有参数那么,参数会匹配 data中的model*/var newList = [];this.list.filter(item => {if (item.name.indexOf(keyword) != -1) {newList.push(item);}})return newList;}}})</script></body></html>
