分类：vue

2020
10-09

vue相同路由跳转强制刷新该路由组件操作

想必大家在平时开发的时候可能遇到这种需求，在打开该菜单页面的情况下，再次点击菜单需要刷新该组件（销毁再创建）。而vue自身如果路由不变的情况下是不会这样做的，那么只能使用一些骚操作了。1.在菜单的路由跳转上绑定一个随机query参数，例如时间戳或者随机数：this.$router.push({path:"/xxx",query:{t:Date.now(),},});该操作会触发路由改变，但是组件内的状态没有初始化，因为组件没有被重建。2.在路由容器上绑定... 继续阅读 >

2020
10-09

解决vue路由name同名,路由重复的问题

在项目中，想让路由后缀为空，或者index的时候，都跳转到路由为index的页面，于是在router中如下配置routes:[{path:'/',name:'index',component:()=>import('@/components/index').then(m=>m.default)},{path:'/index',name:'index',component:()=>import('@/components/index').then(m=>m.default)}]但是浏览器告警信息：[vue-router]Duplicatenamedroutesdefinition:{name:"index",path:"... 继续阅读 >

2020
10-09

解决vue项目input输入框双向绑定数据不实时生效问题

我就废话不多说了，大家还是直接看代码吧~<inputtype="text"maxlength="11"placeholder="请输入联系人电话"v-model="form.phone"/>这样的输入框，绑定的是data中的form对象上的phone字段。在mounted钩子函数里边写：this.form.phone='1888888888';这样在页面上时候不会随着输入框值改变而改变。解决方法如下：this.$set(this.form,"phone",this.$route.query.mobile)或者绑定到data里边的一个字符串，也是可以解决的补充知... 继续阅读 >

2020
10-09

Vue 同步异步存值取值实现案例

1.vue中各个组件之间传值1.父子组件父组件?>子组件，通过子组件的自定义属性：props子组件?>父组件，通过自定义事件：this.emit(′事件名′,参数1,参数2,...);2.非父子组件或父子组件通过数据总数Bus，this.root.$emit(‘事件名',参数1,参数2,…)3.非父子组件或父子组件更好的方式是在vue中使用vuex方法1:用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。方法2:我们定义全局变量。模块a的数... 继续阅读 >

2020
10-09

详解vue路由

前端路由和后端路由：后端路由：对于普通的网站，所有的超链接都是url地址，所有url都对应服务器上对应的资源前端路由：对于单页面应用程序来说，主要通过url的hash（#）来实现不同页面的切换，同时hash还有一个特点HTTP请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash实现在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由路由的使用1.创建一个路由对象，当导入vue-router包... 继续阅读 >

2020
10-09

解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题

1、创建vue项目2、使用vant组件npminstallvant--S全局引用时在main.js引入importVantfrom'vant';import'vant/lib/index.css';Vue.use(Vant);假如你引入之后发现页面的样式和组件都挂载了，但是console控制台会报错，说xxxx组件没有register,这个时候很有可能是你的vant插件版本有问题，重新下载一个最新的vant就可以了，现在是2.6.0版本好，接下来继续在需要使用下拉框的地方使用下拉框组件<van-dropdown-menu><van-dropd... 继续阅读 >

2020
10-09

浅谈vue 多个变量同时赋相同值互相影响

首先，该项目用到了element-ui中的Tabs标签；然后来龙去脉是酱紫的：一个项目中需动态渲染一个列表billItemLIsts，列表中包含ｎ组小列表，其中小列表的state_pj用于改变该小列表中的radio，于是：<el-tabstab-position="left"style="max-height:280px;"><el-tab-panev-for="(itema,index)inbillItemLIsts":key="itema.id":label="itema.title":value="itema.id"><ulclass="bill_set_ul"><liv-for="(subitem,subin... 继续阅读 >

2020
10-09

Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明

如下所示：.lazy并不是实时改变，而是在失去焦点或者按回车时才会更新.number将输入转换成Number类型.trim可以自动过滤输入首尾的空格补充知识：vue通过v-model，@input,@v-model.lazy几种输入框数据更新方式的区别在使用v-model时，如果用中文输入法输入中文，一般在没有选定词组前，也就在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新。如果希望总是实时更新，可以用@input来代替v-model.<divid="app"><inputt... 继续阅读 >

2020
10-09

vue实现在进行增删改操作后刷新页面

问题通常在后台管理项目中，对数据进行增删改查是常规操作。在进行这些操作后，需要手动刷新才能更新列表。本文主要讨论进行增删改查相关操作后如何使当前页面显示操作后的最新数据。解决方案||以删除为例：1.强制刷新：this.$forceUpdate()2.使用window.reload()或router.go(0)，但会使整个浏览器进行重载，页面闪烁。3.重新调用接口:但性能较差，代码冗长。4.provide/inject：（推荐）点此查看VUE官方解释：允许一个祖先... 继续阅读 >

2020
10-09

vue 限制input只能输入正数的操作

在某些项目中input框只能输入数字，可以用以下办法：先在标签上绑定上@input事件来监听标签的值变化，通过正则来改变输入的值。<inputclass="keep_input"v-number-onlystyle="width:35px"v-model="scope.row.fileOrder"@input="scope.row.fileOrder=Number($event.target.value.replace(/\D+/,''))"/>第二部封装个自定义指令放在标签上！directives:{numberOnly:{bind:function(el){el.handler=... 继续阅读 >

2020
10-09

vue:el-input输入时限制输入的类型操作

通过@keyup.native的时间动态监控输入的类型1.手机号码,只能是数字,如果输入了非数字直接清空2.身份证号码,除了Xx和数字其余的一律清空3.基于1.2两种情况下,还有一种是动态创建的字段(也就是v-for出来的),解决方法:先使用split形成字段数组,使用for循环找到最后一个点的前面的字段,方便使用$set更新和渲染页面setDelMsicStr(field,type){letpropsletlenletvalueletnewphoestrletitem=thisif(field){... 继续阅读 >

2020
10-09

vue data变量相互赋值后被实时同步的解决步骤

数据结构是这样子的data(){return{title:'web前端thisdata变量相互赋值后被实时同步问题',val_1:'vue',val_2:''}}问题源：我们在onload()把val_1赋给val_2(或者在用户click时更改也都会出现这个问题)onload(){this.val_2=this.val_1;}解决方法：我们在通过JavaScript把“val_1”转换成字符串类型，再JSON.parse，最后再赋给“val_2”就解决了onload(){this.val_2=JSON.parse(JSON.stringi... 继续阅读 >

2020
10-09

Vue执行方法,方法获取data值,设置data值,方法传值操作

方法写在methods中v-on:click="run()"@click="run()"方法获取data中的数据通过this.数据获取方法设置data中的数据通过this.数据=''设置例如通过this.list=[1,2,3]，设置list的值，让页面出循环list可通过@click="run('123')"，将值传到方法中可通过@click="run($event)"，将事件对象传到方法中，然后根据事件对象的e.srcElement设置点击标签的属性，也可以通过e.srcElement.dataset获取自定义属性<template><divid="app">{{m... 继续阅读 >

2020
10-09

vue 需求 data中的数据之间的调用操作

我遇到过这种情况就是在我的data中会有数据调用data中的其他数据如图我的alertInfoType需要拿到screeningCondition中type的值用过vue的都知道我是不能写成alertInfoType:this.screeningCondition.type这种的原理是什么？忘记了知道了可以评论说下所以我们可以这样写在mounted中直接赋值就可以了！不知道你们有么有遇到过这种情况反正我是遇到了两次了第一次忘记怎么处理的了......over希望能帮到你~~~补充知识：Vue方法... 继续阅读 >

2020
10-09

vue 内联样式style中的background用法说明

在我们使用vue开发的时候有很多时候我们需要用到背景图这个时候会直接使用内联样式直接把你拿到的数据拼接上去注意在vue中直接使用style时花括号一定别忘记还有就是你的url一定要加引号拼接：style='{backgroundImage:"url("+item.img+")"}'完事！补充：好像还可以这样写<div:style="'background-image':'url('+内容+')'"></div>更新一点当你的style设置背景色得时候是需要加{}得但是如果是width... 继续阅读 >

2020
10-09

vue flex 布局实现div均分自动换行的示例代码

   许久没有更新了，今天才意外发现以前还是没有看懂盒模型，今天才算看懂了，首先我们今天来看一下想要实现的效果是什么?当然适配是必须的，1920或者1376都测试过。效果如图所选中区域所示： 一、关于flex布局我建议去看一下http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html这篇博客，我们主要用到flex布局的一个换行属性，它是flex-wrap:wrap，自动换行。二、vue代码（1）html部分：<div... 继续阅读 >