jQuery function fomatterTel(val, old) {//val: 当前input的值,old: input上次的值 var str = ""; var telLen = val.length; if (old.length <= telLen) { if (telLen === 4 || telLen === 9) { var pre = val.substring(0, telLen-1); //substring() 方法用于提取字符串中介于两个指定

js 手机号实现(344)  下面有将正则验证去掉“-” 或“空格”  下一篇博客有单独的删除功能方法 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>aaa</title> </head> <body> <input type="tel" id="phone" onfocus="getCu

最近在做一个Vue项目,前端通过手机号.验证码登录,获取验证码按钮需要设置60s倒计时(点击一次后,一分钟内不得再次点击).先看一下效果图: 输入正确格式的手机号码后,“获取验证码”按钮方可点击:点击“获取验证码”后,按钮进入60s倒计时,效果图如下:                         效果图已经有了,接下来就上代码吧! html <el-button @click="getCode()" :class="{'disabled-style':getCode

花了几天的时间终于在本地把前后端跑通了,以一篇博客记录我这几天的心酸... 1.安装nodejs(自带npm,可能会出现版本错误,更新npm) 2.npm在国内下载时,可能会慢,所以建议要安装淘宝镜像,命令如下 npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装webpack打包,安装webpack(不懂webpack的建议去官网照着例子敲一边,豁然开朗) cnpm install webpack -g 4.安装

首先先弄页面 废话不多说 上代码 静态页面代码 <template> <div class="main"> <div class="top"> <Button type="primary" @click="refresh()">重玩</Button> <span style="font-size: 20px;margin-left: 10px;colo

Vue.js国内开发者 是用于构建交互式的 Web  界面的库.它提供了mvvm 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.从技术上讲, Vue.js 集中在 mvvm 模式上的视图模型层,并通过双向数据绑定连接视图和模型.实际的 DOM 操作和输出格式被抽象出来成指令和过滤器.相比其它的mvvm框架,Vue.js 更容易上手.跟了个视频居然也跟下来了做了个demo欢迎指正 https://fdxtyt.github.io/app/#/

DSkin封装的WebUI开发模式开发桌面应用,使用Vue很方便.使用起来有点像WPF 下面用 element-UI 做个简单的例子. 运行效果:可以自己根据需求改布局效果. 主框架的element-UI 模板代码 <div id="page" class="shadow"> <el-container> <el-header onmousemove="if(event.button == 0){ MoveWindow();

做APP由于项目需要,需要做用户头像上传的功能,头像上传包括拍照和相册选择图片进行上传,这里使用的技术是mui封装的plus,在进行图片裁剪的时候,使用的是photoclip来进行裁剪,由于个人在使用mui自带的组件做图片上传比较麻烦,所以就采用了base64的图片做上传会比较简单,页面的渲染采用的VUE来进行双向数据绑定. 不说了,看代码: changeFace:function(){ this.selectFace = true; this.mask = mui.createMask((re

一.demo实现原理 输入完个人信息后  点击创建用户  数据就会显示在下面的表格中 用到了vue中的数据双向绑定 v-model v-for 还要js正则 数组的unshift splice 等方法 效果如下图 二 完整代码如下   需引入一下vue.js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script

1.首先要下载mark组件. npm install marked --save 2.在Vcontent.vue中简单写一些样式. <template> <div class="wrap"> <div class="mark"> <textarea name="" id="" cols="25" rows="10" class="edi

  <!DOCTYPE html> <html lang="en"> <div>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compati

Rails5.2+Vue.js完成Lists(curd) 注意: Edit/update使用SPA(single-page Application单页面程序)的方法完成.点击文字出现一个输入框和按钮. 我的git: https://github.com/chentianwei411/vue-lists app/javascript/pack/application.js lists.vue 添加了方法 在new Vue创建实例的时候添加了hook created方法,钩子方法调用了fetchLi

我们都知道,vue的组件化是他最强大的核心所在,路由也是特别可爱的一部分,但是路由适合一些大型的组件,看url路径的时候会出现变化,但是有时候我们想要一些小的局部小刷新,这个时候就需要用到它的动态组件了: Vue 自身保留的 <component> 元素,可以将组件动态绑定到 is 特性上,从而很方便的实现动态组件切换 代码如下:slotDome.vue: <template> <div> <slot></slot> <slot name=

表格每行里都有按钮 <el-table-column prop="option" label="操作" align="center" > <template slot-scope="scope"> <el-button size="mini" plain @click="del(scope.$index,scope.row)">删除</el-bu

废话少说,直接上最新鲜的干货 当然,你得提前安装好bootstrap,router,element-ui,vue-axios 1.上递归组件,此处参考了某位大神的代码,具体不知道是谁,因为到处都有人用 <template> <div> <template v-for='menu in menuList'> <!-- 如果当前有子菜单,则显示 el-submenu ,在el-subment 里调用 递归组件 --> <el-submenu v-if='m

在 vue 项目中的 components 中 创建一个 文件夹,文件夹里创建一个 name(这个名字你随意取).vue <template>   <div class="page">     <el-pagination       @size-change="handleSizeChange"       @current-change="handleCurrentChange"       :current-p

今天公司考虑seo设计方案,服务端渲染(ssr)和 预渲染的方式,不过只是打算对几个简单的页面seo,所以选择了使用预渲染的方式,以下是实现过程中遇到的问题,供大家查看,有不对的地方请指正: 使用prerender-spa-plugin,官网文档说是必须使用history模式 1.history模式遇到的问题: a.刷新页面出现空白 按照vue-router官方文档调整nginx, location / { try_files $uri $uri/ /index.html; } 然后调整rout

原创作品转载请注明出处 先来看一下效果图:    功能描述: 1. 点击页面序号跳转到相应页面: 2. 点击单左/单右,向后/向前跳转一个页面: 3. 点击双左/双右,直接跳转到最后一页/第一页: 3. 一次显示当前页面的前三个与后三个页面: 4. 始终显示最后一个页面: HTML: <!-- 分页开始 --> <div class="u-pages" style="margin-bottom:20px; margin-top:10px;">

<el-table-column prop="amount" label="申请提现金额" width="120" align="center"> <template scope="scope"> {{ scope.row.amount | filterMoney }} </template> </el-table-column> filters: { fil

[Demo下载地址]https://git.oschina.net/remainedmute/PhoneNumDemo.git 相关博客http://www.jianshu.com/p/00da4d87b777 1.在UITextField的代理方法中实现手机号只能输入数字并满足我们的要求(首位只能是1,第二位只能是3,4,5,7,8其它不限制) #pragma mark UITextFieldDelegate - (BOOL)textField:(UITextField *)textField

写一点废话,昨天敲代码找bug,找了好久都没找到,后来一哥们找到他说,找代码的bug就像男女朋友吵架,女问男你错了没,男说错啦,女再问错哪了,男傻眼了不知道错哪.在找代码的过程中一直知道我错啦就是找不到错哪了,哈哈~~~~~~ 正文 用vue知识点做购物车, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&quo