分类：Vue

2020
10-08

Vue点击切换Class变化,实现Active当前样式操作

刚入门Vue没多久，在制作过程中遇到很多简单实用的小技巧。没有太多的墨水，直接上代码：一、先在data里增加一个变量，用来储存当前点击的元素data(){return{activeClass:-1,//0为默认选择第一个，-1为不选择};},二、在Template里面的代码，切记在@click方法里面要传index，<li:class="activeClass==index?'active':''"v-for="(item,index)initemList":key="index"@click="getItem(index)">{{itme... 继续阅读 >

2020
10-08

vue中v-for循环选中点击的元素并对该元素添加样式操作

相信大家都会遇到这种情况：v-for循环时，我只需要点击到的元素做出相应反应，其他的元素不变；但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加一个类样式，其他元素不变，但是这样会导致所有的元素都会变化html：<divv-for="(item,index)initems":class='addclass:isactive'@click='onclick()'><span>{{item.name}}</span></div>css：.addclass{color:red;}js：data:{items:[{n... 继续阅读 >

2020
10-08

在vue中对数组值变化的监听与重新响应渲染操作

在我们项目开发过程中，实例中的数据类型可以是对象、数组等。在对象中，某个属性值发生更改时，我们可以通过对象的深度监听，以达到重新渲染页面的需求。或者查阅这篇文章例如：<script>exportdefault{data(){return{objVal:{name:'obj',type:'obj'}}},watch:{objVal:{handler(val,oldval){},deep:true,}},methods:{changeObj(){this.objVal.name='newobj';}}}</script>但是，在使用同一种方式... 继续阅读 >

2020
10-08

Vue项目中数据的深度监听或对象属性的监听实例

众所周知，vue项目中对数据的监听，提供了一个很好的钩子watch，watch可以极其方便的监听我们常用数据类型值的变化，但通常当我们想监听一个对象中，某个属性值的变化时，很难达到我们预期的效果。根据vue的文档，不难发现，使用数据的深度监听来达到这一效果。具体实现如下：watch:{evlist:{handler(val,oldVal){this.isTeam=val.projectParty;this.pjtid=val.pjtid;this.isFinish=val.projectSelfValue;... 继续阅读 >

2020
10-08

解决vue无法侦听数组及对象属性的变化问题

一、数组1、可以监听到的情况如push、splice、=赋值（array=[1,2,3]）2、无法监听到的情况使用下标修改某个元素（这种比较常见）array[index]=1object.a=3直接修改数组lengtharray.length=53、解决方案this.$set(array,index,data)-这是个深度的修改，某些情况下可能导致你不希望的结果，因此最好还是慎用this.dataArr=this.originArrthis.$set(this.dataArr,0,{data:'修改第一个元素'})console.log(this.dataArr)... 继续阅读 >

2020
10-08

使用element-ui +Vue 解决 table 里包含表单验证的问题

应用场景：在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交，同时又需要对table的字段进行校验，效果如图所示：这个校验中，最关键的问题在于如何给el-form-item动态绑定prop。:prop="'tableData.'+scope.$index+'.字段名'"方法一：<template><divclass="app-container"><el-form:model="fromData"ref="from"><el-table:data="fromData.domains"><el-table-columnlabel="姓名"><template... 继续阅读 >

2020
10-08

Vue element-ui父组件控制子组件的表单校验操作

方法一：父组件代码：<template><div><child-formref="childRules":addForm="addForm"></child-form><el-button@click="saveForm()"size='medium'>保存</el-button></div></template><script>importchildFormfrom'./childForm'exportdefault{data(){return{addForm:{name:"",desc:""},}},//组件引用components:{childForm},methods:... 继续阅读 >

2020
10-08

vue使用axios实现excel文件下载的功能

前端VUE页面上的导出或者下载功能，一般是调用后端的一个接口，由接口生成excel,word这些文件的流信息，返回给vue，然后由vue去构建下载的动作，这边整理了一下，封装了一下，方便以后复用。封装一个download文件使用年月日时分秒毫秒做为文件的名称，下载为excel文件/***下载文件*/exportconstdownloadFile=(url,ext,params)=>{letaccessToken=getStore('accessToken');returnaxios({method:'get',url... 继续阅读 >

2020
10-08

vue实现自定义多选按钮

本文实例为大家分享了vue实现自定义多选按钮的具体代码，供大家参考，具体内容如下图示返回的选中列表是一个数组html部分<!--自定义多选--><divclass="list"v-for="(item,index)inarr":key="index":class="item.ischeck==true?'active':''"@click="sel(index,item)">{{item.val}}</div>js部分 //dataarr:[{val:1,ischeck:false},{val:2,ischeck:false},{val:3,ischeck:false... 继续阅读 >

2020
10-08

vue实现div单选多选功能

vue实现div单选多选功能，供大家参考，具体内容如下单选单选：多选：单选功能DOM层：<divclass="labeloption":class="{checked:ageActive==11}"@click="changeStatus(11)">0-16岁</div><divclass="labeloption":class="{checked:ageActive==12}"@click="changeStatus(12)">17-25岁</div><divclass="labeloption":class="{checked:ageActive==13}"@click="changeStatus(13)">26-35岁</div><divclass="labelopti... 继续阅读 >

2020
10-08

Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码第1/3页

类似于浏览器窗口一样的路由切换逻辑，看着还是挺高大上的，本以为有很多高级的玩意儿，奈何复杂的东西总是由简单的东西拼接而成的，这个功能也不例外。本篇文章主要描述两个问题：如何实现这种Tab标签页的路由效果如何为路由切换添加转场动画。该功能的开发主要使用到AntDesignVue组件库的Tab组件和Animate.css效果如下： Tab标签页实现首先是该组件的模板部分，ContextMenu组件是我们自定义的右键菜单，后面会说到。... 继续阅读 >

2020
10-08

vue+AI智能机器人回复功能实现

本文实例为大家分享了vue+AI智能机器人回复的具体代码，供大家参考，具体内容如下操作步骤引入前端代码前端代码是参考github上的一个开源项目，里面包括AI机器人回复和聊天室两个模块，这里只抽取出来一个AI机器人回复的前端，有兴趣的话，可以点击查看封装好代理与请求因为第三方API的请求是外网的，存在跨域问题，所以要配置代理，配置如下：文件：vue.config.jsconstvueConfig={//上面还有项目的其他配置devServer:{... 继续阅读 >

2020
10-08

Springboot+Vue+shiro实现前后端分离、权限控制的示例代码

本文总结自实习中对项目的重构。原先项目采用Springboot+freemarker模版，开发过程中觉得前端逻辑写的实在恶心，后端Controller层还必须返回Freemarker模版的ModelAndView，逐渐有了前后端分离的想法，由于之前，没有接触过，主要参考的还是网上的一些博客教程等，初步完成了前后端分离，在此记录以备查阅。一、前后端分离思想前端从后端剥离，形成一个前端工程，前端只利用Json来和后端进行交互，后端不返回页面，只返回Json数据... 继续阅读 >

2020
10-08

快速了解Vue父子组件传值以及父调子方法、子调父方法

稍微总结了一下Vue中父子间传值以及相互调方法的问题，非常基础、希望可以帮到你！先来个最常用的，直接上代码：1、父传值给子组件父组件：<template><div><pclass="father">父组件</p><child:sid="id"></child></div></template><script>importchildfrom'./child'exportdefault{components:{child},data(){return{id:'0920',//父组件向子组件传的值}},}</script>子组件：<template><div><pcla... 继续阅读 >

2020
10-08

快速了解Vue父子组件传值以及父调子方法、子调父方法

稍微总结了一下Vue中父子间传值以及相互调方法的问题，非常基础、希望可以帮到你！先来个最常用的，直接上代码：1、父传值给子组件父组件：<template><div><pclass="father">父组件</p><child:sid="id"></child></div></template><script>importchildfrom'./child'exportdefault{components:{child},data(){return{id:'0920',//父组件向子组件传的值}},}</script>子组件：<template><div><pcla... 继续阅读 >

2020
10-08

vue如何在项目中调用腾讯云的滑动验证码

在项目中使用滑动验证，可以调用腾讯云的组件和接口（付费项目）导言首先看看官方的步骤教学：https://cloud.tencent.com/document/product/1110/36839其中，前端涉及到的是“步骤3：客户端接入”，里面介绍了两种接入方法：“快速接入”和“定制接入”。项目是原生HTML或者jQuery开发，那么可以使用“快速接入”。项目使用vue、react等框架开发，则需要使用“定制接入”。步骤1、新建项目对应appid在验证码控制台中注册A... 继续阅读 >