vue
Akatsuki233
这个作者很懒,什么都没留下…
展开
-
常见的正则规则
身份证正则/^([1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx])|([1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}(\d|X))$/正则用法参考https://do...原创 2020-03-27 18:08:07 · 399 阅读 · 0 评论 -
从身份证获取出生年月日
html部分 <el-col :span="12"> <el-form-item :label="$t('id_card')" prop="credentialNo"> <el-input v-model="form.credentialNo" @blur="getBirthday"></e...原创 2020-03-27 17:04:36 · 689 阅读 · 0 评论 -
input输入限制只能输入大写字母/数字/汉字等
1. 限制只能输入大写字母<el-input v-model="input" oninput="value=value.replace(/[^A-Z]/g,'');"></el-input>2. 限制只能输入数字<el-input v-model="input" oninput="this.value = this.value.replace(/[^...原创 2020-03-27 15:46:22 · 3510 阅读 · 0 评论 -
js数组对象排序
compare(property) { // eslint-disable-next-line func-names return function (a, b) { const value1 = a[property] const value2 = b[property] return value1 - va...转载 2020-03-07 15:41:21 · 160 阅读 · 0 评论 -
vue 之展开收缩组件
展开收缩组件<template> <div> <div class="exp-col"> <img v-if="shzk" src="../assets/images/expand.png" alt="" @click="tack"> <img v-else src="../assets/images...原创 2019-12-02 09:09:10 · 1551 阅读 · 0 评论 -
什么是 token 以及 token 怎么用
Token的引入:Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背景下,Token便应运而生。token 的作用:在进行敏感操作之前,每个请求需要携带token,但是token 有有效期,token 失效后需要换取新的token并继续请求。参考:什么是 tokenhttps://w...转载 2019-06-24 15:11:24 · 2289 阅读 · 0 评论 -
查看后返回原路径 当前页 / 在当前页的某个位置 的方法
返回后当前页的方法由于这里一开始进来的pageIndex为空,所以默认为 MouseEvent 函数对象,所以我用了类型来判断searchButton: _.debounce(function (pageIndex) { let result = typeof pageIndex if (result === 'number') { this.searchD...原创 2019-06-24 11:04:14 · 271 阅读 · 0 评论 -
下拉框如何获取到value跟code
遍历后端传来的 units 数组,[{value: ‘'区域一',code: '1'},{value: '区域二',code: '2'}]<el-form-item label="活动区域" prop="unit"> <el-select clearable v-model="unit" @change="getRoomByUnit"> &l...原创 2019-06-25 15:19:34 · 734 阅读 · 0 评论 -
filter 对已知数组进行筛选,返回为true的元素或对象并组成一个新数组
定义和用法filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。注意:filter() 不会对空数组进行检测。注意:filter() 不会改变原始数组。 arr = [{a:1,b:2,isChecked:true},{a:0,b:1,isChecke...原创 2019-06-21 16:34:59 · 4578 阅读 · 0 评论 -
传值给后端需为 int 类型,但一开始默认为空的搜索条件如何传0给后端
加一个判断,当一开始的搜索条件为空时,给相应的字段重新赋值为0。此处不可用this.searchData.building = 0的形式赋值。否则一开始刷新,页面会显示0。 /* 获取表格列表 */ searchInfo () { let searchDataFinal = {} if (this.searchData.building =...原创 2019-06-25 11:26:08 · 2562 阅读 · 0 评论 -
vue element-ui中table合计指定列求和
注意点:1.<el-table> 中 加:summary-method="getSummaries"2.<el-table-column> 中要加 prop // 房间号的合计去掉 getSummaries (param) { const { columns, data } = param const sums ...原创 2019-05-29 10:45:10 · 11213 阅读 · 0 评论 -
vue过滤器 | 管道
过滤器,是一个有参数,有返回值的方法。其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果。例: uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器过滤器可以用在两个地方:双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由“管道” | 符号指示: 全局 :范围大,如果出现同名时,权利小 组件内: 如果...原创 2019-07-03 17:02:49 · 683 阅读 · 0 评论 -
查询条件下拉框联动,如果一级为空,二级也为空
直接祭出代码template中 <el-col :xs="24" :sm="12" :md="8" :lg="6"> <el-form-item label="楼宇"> <el-select v-model="searchData.buildingId" clea...原创 2019-06-28 18:33:46 · 813 阅读 · 0 评论 -
element-ui上传一张图片后隐藏上传按钮功能
html部分 <el-form-item label="封面大图"> <el-upload ref="avatar-uploader" class="upload-demo" action="http://localhost:3001/upload/" :httpRequest="uploadHttpDefault" :on-su...原创 2019-09-11 14:58:59 · 1475 阅读 · 0 评论 -
路由传参 / 保存路由跳转带过来的查询字符串并操作
在新闻跳转到新闻详情传递 id// 新闻页面传递 id detail(row) { this.$router.push({ path: '/home/detail', // 要注意与 routes 中的路径一致 query: {id: row.id} }) } // 详情页面获取 id methods中: ...原创 2019-09-09 10:02:36 · 399 阅读 · 0 评论 -
vue 动态添加class,三个以上的条件做判断
如果 status为1,样式为redRoom如果 status为2,样式为greenRoom1如果 status为其他,样式为greenRoom2:class="{'redRoom': Number(items.status) === 1, 'greenRoom1': Number(items.status) === 2, greenRoom2: Number(items.st...原创 2019-09-09 09:53:27 · 8745 阅读 · 0 评论 -
element-ui 上传多张图片并显示图片列表 / 修改时显示图片列表
template部分: <el-row class="searchForm"> <el-col :xs="24" :sm="24" :md="24" :lg="24"> <el-form-item label="正文图片"> <el-upload action...原创 2019-09-06 16:25:55 · 5497 阅读 · 0 评论 -
前端渲染跟后端渲染的区别
前端渲染:前后端分离,前端先写好页面后,拿到后端给的api接口,把数据添加到页面中渲染出来。如果没有后端,只是不能进行数据交互,用户还是能看到页面的。右键查看网页源代码,前端渲染的东西只能看到渲染后的,而无法看到原来的代码。后端渲染:数据跟页面都是一起渲染到浏览器上的。如果没有后端,那么整个页面都会出不来,因为数据跟页面是一起渲染到浏览器上的。而后端渲染的 ,右键查看网页...原创 2019-07-17 18:30:01 · 476 阅读 · 0 评论 -
element-ui 轮播图/幻灯片/走马灯,点击轮播图之后出来一个放大的轮播图对话框
以下为自适应宽高的,注意行内样式中间使用分号隔开的,不是逗号,否则会不生效。外面的轮播图<el-carousel height="150px" arrow="always" indicator-position="none" @change="carouselChange"> <el-carousel-item v-for="(item, index) in e...原创 2019-07-05 18:28:29 · 7120 阅读 · 0 评论 -
vue+element-ui 表单的 el-input 第二次修改时无法输入
由于新增跟修改用的是同一个弹窗,所以当修改提交时,要清空 input 框内的值。提交时不能只把 父对象formData 设置为空对象。即this.formData = {} 是错误的正确的写法为this.formData = {name: '' }原因:如果把this.formData设置为空,this.formData.name 就是 undefined,此时就会赋值不上。 ...原创 2019-07-10 16:47:20 · 3828 阅读 · 1 评论 -
vue中keep-alive的用法及问题描述
使用场景:在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能。在业务开发中,会有路由跳转但是返回需要保留数据的场景,vue 中提供了 keep-alive 来处理<keep-alive> <router-...原创 2019-06-05 16:29:19 · 607 阅读 · 0 评论 -
element-ui表单加判断条件显示必填或非必填 :required
需求: 如果下拉框中选中的国家为中国,省份为必填;如果选中的为外国, 省份为非必填。<el-col :xs="24" :sm="12" :md="12" :lg="6"> <el-form-item :label="国家" prop="country"> <el-select clearable v-model="from.country...原创 2019-05-30 18:05:57 · 23027 阅读 · 3 评论 -
如何修改,在哪里修改滚动条样式
修改滚动条的样式,public.less中:/* 滚动条 */::-webkit-scrollbar { width: 8px; // 右边滚动条宽度height: 6px; // 下面滚动条高度background-color: rgba(201,208,220,1);} /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { bord...原创 2019-03-29 14:32:33 · 222 阅读 · 0 评论 -
vue使用小知识点
<el-input placeholder="请输入内容" v-model="input" :result="1+1"> </el-input>v-model : 双向数据绑定:result 会把后面引号的内容当作一段 js数据 来处理,如果不带冒号,那么result="1+1" 只是一段字符串...原创 2019-03-17 17:32:46 · 104 阅读 · 0 评论 -
实现一个竖直的显示表头的表格(vue版本)
https://www.cnblogs.com/martinl/p/6696273.html转载 2019-03-12 16:30:47 · 2695 阅读 · 1 评论 -
:model和v-model的区别
<div> <input type="text" v-model='msg'> <child v-model='msg'></child> </div>v-model通常用于input的双向数据绑定 ,也可以实现子组件到父组件数据的双向数据动态绑定。:model和v-model的区别::model是v-...转载 2019-03-20 14:30:10 · 917 阅读 · 0 评论 -
命名路由 router-link ,动态获取数据的方法 this.$route ,编程导航 this.$router
命名路由 router-link相当于一个 a 标签,也有点击跳转功能的。需求,通过a标签点击,做页面数据的跳转app.vue 中使用router-link标签1:去哪里 &lt;router-link to="/beijing"&gt;去北京&lt;/router-link&gt;2:去哪里 &lt;router-link :to=&q原创 2019-02-19 10:52:18 · 922 阅读 · 0 评论 -
vue-router 路由
路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。路由中有三个基本的概念 route, routes, router。1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 =&amp;gt; home内容, 这是一条route, about按钮 =&amp;gt; a...原创 2019-02-19 10:47:36 · 117 阅读 · 0 评论 -
过滤器
过滤器,本质上就是一个函数。其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果。例: uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器过滤器可以用在两个地方:双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由“管道” | 符号指示:<!-- 在双花括号中 -->{{ message | capitaliz...原创 2019-02-19 10:37:42 · 185 阅读 · 0 评论 -
组件间的传值
父传子 props:[‘prop1’,‘prop2’]父组件通过子组件的属性将值进行传递方式有2:常量: prop1="常量值"变量: :prop2="变量名"子组件需要声明根属性props:[‘prop1’,‘prop2’]在页面中直接使用{{prop1}}在js中应该如何使用prop1? this.prop1获取父组件中:// created原创 2019-02-19 10:29:29 · 181 阅读 · 0 评论 -
父子组件及全局组件
父子组件使用组件实例之间是独立的,有模块作用域。父和子,使用的是父,被用的是子父需要声明子组件,引入子组件对象,声明方式如下主文件 app.vue 中:# 第一步,引入sub.vue <script>中: import 子组件对象 from './xxx.vue'; → → import SubVue from './sub.vue'# 第二步,在expor...原创 2019-02-19 10:15:47 · 213 阅读 · 0 评论 -
vue中常用的 v- 指令和自定义指令
常用指令v-if 元素是否移除或者插入v-show 元素是否显示或隐藏v-model 双向数据绑定,v-bind是单向数据绑定(内存js改变影响页面)v-text 是元素的innerText只能在双标签中使用v-html 是元素的innerHTML,不能包含注释 &lt;!--{{xxx}} --&gt;自定义指令参考 &gt; https://www.cnblogs.c...原创 2019-02-19 10:01:46 · 1115 阅读 · 0 评论 -
index.html和app.vue之间的关系
// main.js中:new Vue({el: '#app', // index.html中的 <div id="app"></div>components:{App}, // ES6语法,在对象中,如果键值对一样的话,只写一个就可以(声明有哪些组件)template: '<App/>' // <App/> 等于 <App>...原创 2019-04-08 10:39:34 · 1619 阅读 · 1 评论 -
简易版垂直表头的表格(vue版本)
方法一<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>垂直表头</title> <meta name="v...原创 2019-04-08 14:42:09 · 1489 阅读 · 0 评论 -
表单搜索条件清空、重置注意事项
el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使。<el-form :model="addServiceData" ref="addServiceForm"> <el-form-item label="手机号" prop="mobi...转载 2019-04-16 15:33:42 · 1292 阅读 · 0 评论 -
由对象组成的数组如何去重?
需求:将下面data数组中id重复的数据去掉?let data = [ { id: 201801, name: '张三', age: 15, }, { id: 201804, name: 'John', age: 18, }, { id: 201802, name: '李四', age: 18, }, { id: 201801, name: '张三', age...转载 2019-04-24 16:19:23 · 261 阅读 · 0 评论 -
computed和watch的区别
watch,computed和methods的关系1.watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。2.对methods:methods里面是用来定义函数的,很显然,它需要手动调用才能执行。而不像watch和c...转载 2019-04-24 15:58:05 · 22034 阅读 · 4 评论 -
vue 生命周期钩子函数 created/mounted / activated 等
created():在创建vue对象时,当html渲染之前就触发;但是注意,全局vue.js不强制刷新或者重启时只创建一次,也就是说,created()只会触发一次mounted(): 是挂载vue实例后的钩子函数,钩子在主页挂载时执行一次,如果没有缓存的话,再次回到主页时,mounted还会执行,从而导致ajax反复获取数据。activated(): 是组件被激活后的钩子函数,钩子则...转载 2019-04-19 17:42:00 · 4459 阅读 · 0 评论 -
element-ui中手机号/中文姓名/英文姓名/密码/邮箱/日期 等简单的验证规则(vue)
验证手机号/中文姓名/英文姓名/密码/邮箱等:data : { // 设置身份证号的验证规则 const idCard = (rule, value, callback) => { if (!value) { callback(new Error('请输入身份证号')) } else { const re...原创 2019-04-28 15:48:33 · 3420 阅读 · 0 评论 -
vue {{}} 里面的函数,表达式
{{}} 里的单个表达式{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}{{ fn() }}这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。<...原创 2019-04-17 20:22:24 · 8335 阅读 · 0 评论