美文网首页
记录一些不常见,但是有用的方法

记录一些不常见,但是有用的方法

作者: 程序员小布的养生之道 | 来源:发表于2017-07-18 18:02 被阅读0次

    1.Object.keys(obj)返回值:一个表示给定对象的所有可枚举属性的字符串数组。

    参数:

    数组 obj = ['name','age','sex'],返回值为数组["0", "1", "2"]

    对象 obj = { love: 'girl', sex: 'male', age: 18 } 返回值为数组["love", "sex", "age"]

    特点:取数组的索引、对象的属性名

    2.scrollBehavior

    Vue项目中,在路由中配置这个属性,和keep-alive结合可以实现后退时回到之前滚动的位置,并不刷新数据,前进时刷新数据的效果

    newVueRouter({    

    mode:'history',    

    routes: [{        path:'/foo',            component: (resolve) => {require(['views/foo'], resolve)        },        meta: {isKeepAlive:true}    }],    

    scrollBehavior (to,from, savedPosition) {if(savedPosition ||typeofsavedPosition =='undefined') {//从第二页返回首页时savePosition为undefined

    //只处理设置了路由元信息的组件from.meta.isKeepAlive =typeoffrom.meta.isKeepAlive =='undefined'?undefined:false;to.meta.isKeepAlive =typeofto.meta.isKeepAlive =='undefined'?undefined:true;if(savedPosition) {returnsavedPosition;            }        }else{from.meta.isKeepAlive =typeoffrom.meta.isKeepAlive =='undefined'?undefined:true;to.meta.isKeepAlive =typeofto.meta.isKeepAlive =='undefined'?undefined:false;        }    }})   

    2.对img设置name属性,如name=b1,width=200px,取图片元素的时候可以使用document.b1.offsetWidth获取到宽度

    3.input框回车事件,会刷新页面,解决方法如下:

    keypress事件,keyCode为13时执行代码,在input输入框前再添加个输入框,设置display为none

    4.接口请求过来的异步数据,作为prop属性传给子组件,子组件获取不到,解决方法为:

    在created钩子函数里,设置一个定时器,在定时器里调用方法,如setTimeout(()=>{this.page()})

    5.vue组件中,input输入框,按回车触发事件

    <input @keyup.enter="change" >同样 可以实现按回车触发事件

    6.对一个伪数组遍历的方法

    [].slice.call(this.querySelectorAll('input')).forEach(function(val) {})

    7.表单重置

    formObject.reset()

    8.左边不固定宽度,右边自适应布局

    左边元素设置float:left 右边设置display:table-cell

    9.最小最大值

    Math.min.apply(null, arr)

    10.button元素请求接口时会刷新页面,建议改用a标签







    相关文章

      网友评论

          本文标题:记录一些不常见,但是有用的方法

          本文链接:https://www.haomeiwen.com/subject/rlgetxtx.html