4 系外行星研究僧

我要认证

slow but steady

等级
TA的排名 9w+

解决flex布局position:fixed定位失效的问题

场景:在封装tabbar组件的时候,代码和效果如下图:#tab-bar { display: flex; background-color: #ccc;}现在我想把导航栏固定到页面下方,自然想到fixed定位,于是兴高采烈(bushi)加了如下代码: position: fixed; bottom: 0;然后就变成了如下图所示效果:了解到原来是flex布局和绝对定位、固定定位(fixed、absolute)会产生冲突解决办法一:width:100%;.

2020-10-22 10:52:56

deactivated和beforeRouteLeave中​​​​this.$route.path的区别

场景:四个一级路由,当从about跳转到profile的时候,控制台打印this.$route.path,观察二者的区别1. beforeRouteLeavebeforeRouteLeave (to, from, next) { console.log(this.$route.path) next() }当从about跳转到profile的时候打印this.$route.path如下可以看出:此时this.$route.path中保存的是跳转前的路径...

2020-10-21 17:30:13

解决vscode中TypeScript报错“函数实现重复”的问题

命令行终端:tsc --init即可解决

2020-10-19 16:03:02

Vue 和 Vue CLI指定版本的安装卸载以及查看版本号

0. 查看node、npm和webpack的版本node -vnpm -vwebpack -v1. 安装Vue CLI3和4版本(2基本很少用了)npm install -g @vue/cli//不指定版本会安装最新的 目前是4.5.7 (2020/10/15)npm install -g @vue/cli@3 //会安装最新的3的版本3.12.1npm install -g @vue/cli@3.6.3 //安装指定的3.6.3版本2. 查看Vue CLI版.

2020-10-15 18:07:14

JS 对象数组去重的常用方法

0. new Set 的不适用项目中需要将一个对象数组去重,一般的数组去重可以直接用 new Set() 方法即可,但是对象数组的话,因为每一个元素都是引用类型比较复杂,使用new Set 无法进行去重,代码如下所示:var arr1 = ["张三","李四","王五","张三"]var arr2 = [{"id":1,"name":"张三"},{"id":2,"name":"李四"},{"id":1,"name":"王五"},{"id":1,"name":"张三"}];console.log

2020-10-15 15:16:25

element ui中选择组件el-select各种样式和功能总结

el-select在工作中使用十分频繁,现将各种样式和功能记录下来。1. 输入实时搜索,输入为空不显示选项列表(适合数据项较多),可以不选中选项 <el-select v-model="query.accountName" filterable remote reserve-keyword clearable

2020-10-13 18:16:55

Vue中子组件向父组件$emit传递一个和多个参数方法总结

1. 一个参数子组件向父组件传递一个参数时主要有以下两种方法//子组件this.$emit('itemClick',item)方法一:不加括号//父组件 <div id="app"> <Child @itemClick="handleItemClick"/> </div>methods:{ handleItemClick(item){ console.log(item) } }可以看到,如果父组件的事件

2020-10-10 22:10:50

Vue中v-model和v-bind:value的区别以及手动实现v-model

以下都以input为例:一、Vue中v-model和v-bind:value的区别1. v-model//html<div> <input type="text" v-model="message" /> <div>{{message}}</div></div>//jsexport default { data(){ return{ message:'123' } }

2020-10-09 17:04:10

解决vue通过索引值修改数组中的元素页面不改变的问题

根本原因:不能通过索引值 !因为Vue的内部没有监听通过索引值来改变数组,虽然data被更改,但是View层不会发生变化解决办法1:如果是插入或者删除可以通过数组的splice方法this.letters[0]='b'//替换成this.letters.splice(0,1,'b')解决办法2:插入或者删除也可以使用Vue的set方法this.letters[0]='b'//替换成Vue.set(this.letters,0,'b')Vue.set (要修改的数组

2020-10-09 10:42:29

v-for遍历数组和对象的区别

1. 数组 <li v-for="(item, index) in items"> </li>//index可选数组的item也就是value2.对象<div v-for="(value, name, index) in object"></div>//name index可选小结:不管是数组还是对象,遍历的第一个属性总是value,最后一个总是index。...

2020-10-09 09:45:41

element ui中多选组件el-select选择后自动关闭

//html <el-select @change="selectChange" ref="selectAppType" style="width:620px" filterable remote clearable :remote-method="xxx" v-model="xxx" multiple <el-option v-for="item in xxx" :key=...

2020-09-27 09:38:50

for in / for of /forEach 遍历 对象/数组 终极总结

一、for..in1. 遍历数组 books:[{name:'书本1',price:100},{name:'书本2',price:200},{name:'书本3',price:300}] totalPrice(){ let totalPrice = 0; for(let i in this.books){ console.log(i); // 0,1,2 totalPrice += this.books[i].pri

2020-09-25 17:05:08

vue登录类型用户邮箱切换案例以及解决input复用问题

<template><div><span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="用户账号" key="username"></span><span v-else> <label for="email">邮箱地址&lt.

2020-09-25 16:53:44

element ui 中el-button按钮,根据不同数据改变按钮type即显示颜色

//html<el-button :type="buttonType('success')">按钮1</el-button><el-button :type="buttonType('failure')">按钮2</el-button>//js methods:{ buttonType(val){ if(val=="success"){ return "primary" } if(val...

2020-09-25 15:31:09

Vue事件处理函数中同时传递event对象和其它参数

1. methods 事件调用的方法中不需要传递参数以下两种事件处理函数加括号和不加括号是等价的:// html<button @click='handleClick'>按钮1</button><button @click='handleClick()'>按钮2</button>//js methods:{ handleClick(){ console.log('点击了'); } }//输出两次"点击了

2020-09-24 10:54:37

解决 vue data中数据之间的调用undefined问题

在data中直接用this肯定是错的,这就涉及this的指向问题不懂的可以参考我的另一篇文章为什么js对象的属性不能用this调用另一属性?所以选择在mounted生命周期中完成赋值操作export default { data(){ return { firstName:'111', lastName:'222', fullName:'' } }, mounted(){ this.fullName

2020-09-21 16:38:40

点击列表中的哪一项,该项文字变为红色,默认第一项初始化为红色。

如果不让第一项默认显示红色,初始化给currentIndex赋值为-1或者其它值即可,但不能是空字符串。空字符串第一项仍然为红色。<template><div> <ul> <li v-for="(item,index) in movies" :key="item" @click='handleClick(index)' :class="{showRed:currentIndex == index}" >{{item}}<.

2020-09-21 10:59:10

解决element-ui el-input输入框赋值后不能编辑以及延迟响应的问题

先看一下你的input是不是绑定的是对象中的一个属性如下所示: <el-input v-model="ruleForm.concernMember" placeholder="请输入关注人erp"></el-input>ruleForm: { concernMember: "" },这个问题一般有两种解决方案方案一:在data中给input的值赋一个初始值方案二:在给input赋值时,使用this.$set如上图代码.

2020-09-18 10:16:56

vue项目 div span 等没有disabled属性的标签设置禁用(禁止点击)和置灰

div和span是一样的,这里仅以span做演示首先动态添加notClick的样式: <span :class="{notClick:isNotClick}" @click="handleDel(scope.row)">删除</span>.notClick { // pointer-events: none; color:grey; cursor:not-allowed;}这里遇到一个知识点,pointer-events:none和cursor:

2020-09-10 18:40:42

不用a标签在新窗口中打开外链的方法

location.href= "url地址"会在覆盖原窗口wiow.open("url地址")会在新标签/新窗口打开这个链接

2020-09-10 11:10:52

查看更多

勋章 我的勋章
  • GitHub
    GitHub
    绑定GitHub第三方账户获取
  • 签到达人
    签到达人
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 阅读者勋章Lv1
    阅读者勋章Lv1
    授予在CSDN APP累计阅读博文达到3天的你,是你的坚持与努力,使你超越了昨天的自己。
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv2
    勤写标兵Lv2
    授予每个自然周发布4篇到6篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。