前端Vue笔记
关注
分享
扫一扫
一粒程序米
行业方向：物联网 移动开发
展开
-
vue使用自定义指令实现禁止非数字输入并全局使用
当input的type为text的时候，又要禁止非数字输入，这听起来很矛盾是吧，但是偏偏又会有这种场景，因为v-model的值需要在输入为空时默认显示为 --，那只好通过js去处理了。// 判断输入的字符是否为数字，并且输入字符位数不超过3位 if(!} };} });// 自定义指令的实现 } , unbind : function(el) {// 解绑自定义指令的事件监听器等 } } } });原创 2023-05-12 18:30:00 · 469 阅读 · 1 评论 -
修改element样式避坑笔记
否则就算加了/deep/还是加了!important，对于要修改的样式还是不生效的。举例：下图就是没修改之前的，需求是贴合并对齐选择框。原创 2023-04-07 14:41:39 · 116 阅读 · 0 评论 -
element-ui的提示框修改停留时间以及修改位置
注意了，如果在显示提示框时点中了提示框，提示框就会永久停留，除非触发了下一次别的提示框的出现。原创 2022-10-10 18:30:00 · 4500 阅读 · 0 评论 -
vue的点击事件增加防抖
【代码】vue的点击事件增加防抖。原创 2022-10-10 19:30:00 · 1020 阅读 · 1 评论 -
当v-if和v-for需要同时使用的时候
当使用v-for的时候需要选择性地隐藏部分item本来的错误写法是这样：在data里声明的cardList以上的那种用法是错误的。v-for的优先级是高于v-if的，如果两者同时使用，那么v-if会在每一个v-for循环渲染出来的项上作用，造成性能上的浪费。下面是正确用法：我们可以利用computed：这样就可以了......原创 2022-06-06 21:30:00 · 213 阅读 · 1 评论 -
vue3修改element的el-upload的样式
<style lang="scss" scoped>.upload-demo ::v-deep .el-upload--picture-card{ margin-top: 4%; height:80px; width:80px; line-height: 80px;}.upload-demo ::v-deep .el-upload-list--picture-card .el-upload-list__item{ margin-top: 4%; height:80p原创 2022-03-02 13:42:09 · 5933 阅读 · 1 评论 -
vue实现登录路由跳转到成功页面
一. 效果1.未登陆之前2.登录界面3.登录之后路由跳转二.需求分析要求：使用vue-cli搭建 创建项目密码输入框有 两个功能，当用户输入时候如果坚持caps lock处于开启状态。 右侧出现提示 caps lock is on当用户点击右侧的眼睛图标的时候， 可以明文和密文的方式显示密码页面的 组件可以使用 element-ui5.点击login的时候 如果用户名或密码为空，需要把 对应的输入框变红，并且该输入框下方提示提示 用户名或密码不能为空完成输入后原创 2021-08-10 17:45:33 · 40278 阅读 · 9 评论 -
前端Vue组件笔记
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue组件:todolist</title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="root.原创 2021-06-19 15:35:51 · 183 阅读 · 0 评论 -
Vue入门笔记
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue入门</title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!-- id为root的div就是Vue.原创 2021-06-19 11:41:45 · 233 阅读 · 0 评论