- 博客(52)
- 问答 (2)
- 收藏
- 关注
原创 input设置只能输入正整数且不能为0
oninput事件会在表单元素的值发生变化时立刻触发,无论是通过键盘输入、粘贴、剪切、拖拽等方式,都能实时响应。在表单元素的值发生变化并且元素失去焦点时触发,他主要适用于需要在表单元素失去焦点时进行处理的场景。主要用于实时监控表单元素的输入,特别是一些需要动态展示输入内容的场景。使用v-model和计算属性的完整使用更新输入的值。
2024-08-26 14:29:06 293
原创 vue文字广告循环匀速滚动效果
需求:vue实现文字在div中从左到右实现循环滚动效果,鼠标移入暂停滚动,鼠标移出继续滚动,从后端拿到文本数据,不管数据长短,循环匀速播放。
2023-06-14 11:20:11 1426
原创 elementui竖向导航栏卡顿问题
只需要加上这行CSS即可,同时设置菜单宽度也在这个CSS里面设置,效果完美。今日发现Element 菜单折叠效果卡顿。
2023-05-09 15:25:45 440 1
原创 js简洁方法
1.数组去重let arr = [1,2,3,4,5]let arr1 = {...arr}console.log(arr1)3.字符串转Numer类型let str = '123' //numberlet num = +strconsole.log(typeOf(num)) //Number4.Number转字符串类型let num = 123 //numberlet str = num + ''console.log(typeOf(str)) //String
2022-04-24 15:55:37 113
原创 一个数组赋值给另一个数组。修改这个数组会改变原来的数组里的内容。深拷贝和浅拷贝
对象或数组的简单赋值,修改新值也会改变原值。这时我们需要获取原值的深拷贝对象。方法一知道要赋值的是对象还是数组对于对象,可以通过newObj = JSON.parse(JSON.stringify(obj))实现。对于数组,可以通过 newArr = […arr]或者newArr = arr.slice(0)来实现。方法二不知道要赋值的数据类型还有个通用的方法调用一次let isClass=function(o) {undefinedif (o === null) return “Null”
2022-04-14 15:25:15 1792
原创 Vue子组件调用父组件的方法函数
第一种方法直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template> <div> <child></child> </div></template><script> import child from './components/dam/child'; export default { components: { child
2022-04-02 14:35:13 528
原创 vue element el-input 输入框当内容长度超出时现示el-tooltip提示
html <el-form-item label="派驻寿险机构" prop="lifeComName"> <el-tooltip :disabled="disabledTooltip" effect="dark" :content="ruleForm.lifeComNameStr" placement="top"> <el-input ref="lifeComNameStr" v-model="ruleForm.lifeCo
2022-04-02 14:11:41 6293 2
原创 Vue子组件调用父组件的方法函数
第一种方法直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template> <div> <child></child> </div></template><script> import child from './components/dam/child'; export default { components: { child
2022-02-16 15:50:28 714
原创 父组件通过事件显示子组件弹框
// 子组件正常填写<dialog :visible.sync="dialogvisible"></dialog>// 子组件<components ref="authordialog"><components>// 父组件不需要给子组件传递dialogvisible// 事件中填写 click () { this.$nextTick(() => { this.$refs.authordialog.dialogvisible =
2022-02-16 14:54:31 278
转载 如何完整的搭建一个项目的开发环境?
本章节主要说的是如何完整的搭建一个项目的开发环境一、安装vue脚手架首先创建一个文件夹并且在本文件夹的黑窗口(cmd命令进入)安装Vue的脚手架,使用:cnpm i -g @vue/cli 命令进行安装检查是否安装成功 :vue --version 命令二、前端vue项目创建创建前端项目文件夹 vue create 项目名例如:vue create kigo-web2.选择Man…(手动安装)3.选择需要的样式4.用2.0x5.Use history mode for router
2021-12-09 14:23:33 2500
原创 vue中动态添加class类名的方法
<template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名, 第二个参数:boolean值 --> <!-- 对象的形式: 用花括号包裹起来,类名用引号, --> <!-- 优点: 以对象的形式可以写多个,用逗号分开 --> <p :class="{'p1' : true.
2021-11-25 09:47:33 2053
原创 vue中动态添加class类名的方法
<template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名, 第二个参数:boolean值 --> <!-- 对象的形式: 用花括号包裹起来,类名用引号, --> <!-- 优点: 以对象的形式可以写多个,用逗号分开 --> <p :class="{'p1' : true}
2021-11-25 09:45:57 4639
原创 js正则效验不能全为数字、字母 不超过50字符
var regu = " ^(?![0-9]+$)(?![\u4E00-\u9FA5a-zA-Z]+$)[0-9A-Za-z]{6,20}$"
2021-11-22 18:09:18 3047
原创 vue中,实现锚点定位及跳转(url不发生变化)
出现问题:has模式的原因页面实现锚点跳转,但跳转之后点击返回列表时候由于url地址出现#id,导致点击列表或创建修改成功不会返回列表。 解决办法:<div class="footer" @click="returnTop"> 跳转 </div> <div id="header"> 内容 </div> methods:{ returnTop:function(){ document.querySelector("
2021-11-16 16:49:18 2068
原创 vue实现监听滚动条
绑定在window上 addEventListener 事件需要 第三个参数设置为true,不然事件不起作用 mounted() { window.addEventListener('scroll',this.handleScroll,true) } methods: { handleScroll(){ let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; co
2021-11-16 10:22:33 805
原创 vue获取当前年月日
首先在方法里声明时间接收addDate() { let nowDate = new Date(); let date = { year: nowDate.getFullYear(), month: nowDate.getMonth() + 1, date: nowDate.getDat
2021-11-11 14:22:38 931
原创 vue 的 for 循环体里面的 element UI 表单项添加必填校验
今天遇到一个需要给 for 循环体里面的 form 表单项添加校验的需求,为每一个循环的模块单独添加校验,实现如下:<el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeh
2021-11-10 14:23:46 2415
原创 <pre>标签用法 展示代码块
你可能正在使用 pre 标签。这是一个 HTML 中非常特别的标签,它允许其中的空格真正显示出来。例如:四个空格将真实显示成四个空格。这不同于其他标签通常的做法,其他标签会将之间的空白压缩成一个。 主要用于来显示代码块 包括换行空格 后端返回字符串的json 前端需转换 JSON.parse() 然后放入《pre》标签内let data = "{sunny:sunny}"data = JSON.parse(data)<pre>{{data}}</pre>...
2021-10-14 11:12:39 1390
原创 vue初始化全部的 data数据
初始化全部的 data数据很强!!Object.assign(this.$data, this.$options.data());
2021-09-26 20:15:45 727
原创 js 判断对象中是否含有 键
在js后台返回对象中,判断是否存在该key, 和java 中判断map中是否还有该key 差不多意思:data: 是后台的返回对象,如 在ajax success 中返回的对象。data.hasOwnProperty("key") ---> true or false
2021-09-22 18:31:44 1010
原创 传参为fromdata表单时 需要传入证书有特殊符号需怎么转义
场景:上传证书后返回字符串包含 ±= 中文 fromdata模式会自动将特殊符号转义 后端接收不到这个值 需转义encodeURIComponent(URIstring)JSON.stringify() 传多个数组和其他类型数据`
2021-09-17 11:25:12 287
原创 数组a的key的value值,拿走数组B的vaue值
var a = [] let b = [{ mz: '我是名字', bumen: '我是工号' }, { mz: '我是名字2', bumen: '我是工号2' }] b.forEach((item, index) => { a.push({ value: item.mz, bmid: item.bumen }) }) console.log...
2021-09-14 10:10:18 96
原创 VUE+ELEMENT-UI实现表格CHECKBOX单选
因为element-ui上面的带checkbox的表格,是多选。如下操作,能把多选变成单选。最终结果如下图:代码如下: <el-table ref="multipleTable" :data="dialogTables" @select-all="dialogCheck" @select="dialogCheck" @selection-change="dialogCheckChange"> <el-table-column type="selection" width="
2021-09-09 14:24:14 606
原创 两个相同数组筛选相同项
let arr = [{ id: 1, name: 'zs' }, { id: 2, name: 'ls' }, { id: 3, name: 'ww' }, { id: 4, name: 'xm' }, { id: 5, name: 'xh' },]let sum = [{ id: 1, name: 'cc' }, { id: 2, name: 'ls' }, { id: 3, name: 'ww' }, { id: 4, name: 'xm' }, { id: 5, name: 'xh' },] d
2021-08-17 18:37:56 810
原创 将一个已知数组的所有对象其中某些值赋值给另一个数组
需求:需要将一个数组中的所有对象其中的某些键值对赋值给另一个数组,并且这个新数组是[[],[]]多重数组 赋值给第一个数组<script> let b =[[],[]] let c = [ { a:1, b:2, c:3, }, { a:1, b:2, c:3, },
2021-08-17 17:25:14 1466
原创 js怎么遍历对象 JS 快速将对象中所有键赋值为空
遍历对象:Object.keys(arr)console.log(Object.keys(arr))JS 快速将对象中所有键赋值为空‘’arr = { a : '1111', b : '2222', c : '33333'}Object.keys(arr).forEach(key=>{arr[key]=''})console.log(arr)
2021-08-09 19:04:42 1342
原创 setChecked和setCheckable区别
setChecked和setCheckable区别setCheckable(true)为属性,表示可以选中setChecked(true)为属性的值,表示已经选中<div ref="tree"></div>methods:{check () {this.$refs.tree.setChecked(data,true)}
2021-08-09 18:59:33 4567
原创 vue解决非响应数据问题方法
在Vue官方文档中指出,$forceUpdate具有强制刷新的作用。$forceUpdate()那在vue框架中,如果data中有一个变量:age,修改他,页面会自动更新。但如果data中的变量为数组或对象,我们直接去给某个对象或数组添加属性,页面是识别不到的<template> <p>{{userInfo.name}}</p> <button @click="updateName">修改userInfo</button><
2021-07-20 14:35:05 850 1
原创 elementui中导航组件点击二级菜单页面跳转但是二级菜单关闭问题
elementui中导航组件库 多个一个菜单中包含二级菜单 第一次点击二级菜单页面跳转但是二级菜单关闭功能解决方法: :default-active="$route.path" :unique-opened="true"根据路由判断是否展开当前选中项...
2021-07-20 14:27:07 2158
原创 动态路由传值
出现情况:1.在主页面进入相同页面时显示数值不相同可以根据动态路由传参,在相同页面中mounted中监听动态路由参数判断来做出逻辑主页面 // 相同页面 this.$router.push({name: '路径一级名称-二级名称', params: { // 参数名 :数值 tablebtn: true } })相同页面 mounted () { // 输出路由 // 根据路由传参做出判断 i
2021-06-10 18:10:57 165
原创 async异步和await等待使用
asyncasync的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思,异步函数也就意味着该函数的执行不会阻塞后面代码的执行,async函数返回的是一个promise 对象。async 函数也是函数,平时我们怎么使用函数就怎么使用它,直接加括号 且 使用 .then的方法(参考https://www.jianshu.com/p/ab767311589d)awaitawait的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后,才继
2021-06-04 16:41:08 815
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人