标签: Vue

Vue实现点击导航栏当前标签后变色功能

效果图实现这个功能,借助一个切换标识,当与各标签项index对应时切换css。HTML:{{item}}JavaScript:exportdefault{data(){return{current:,//切换标识nav:[//导航栏数据'首页','新闻中心','要闻资讯','联系我们']}},met...

JavaScript 2021-05-20 178 0 0 阅读全文

Vue使用Mixin分发组件的可复用功能

vue创建高阶组件的实现不够react优雅,但那是vue和react的设计思想导致的。在react中一切都是函数,而在vue中,组件最终都是函数,但在开发时可以是JSON对象,而且每个vue组件要注意三个点:props、events和slots,就是这三个导致vue创建高阶组件时要传入相应的属性,较...

JavaScript 2021-04-27 157 0 0 阅读全文

Vue表单中遍历表单操作按钮的显示隐藏示例

使用情况,vue中返回的数据循环遍历如果用到v-if时不能直接赋值true或者false,要true或者falsepush到数组里面,隐藏或显示时用splice方法。以下是详情1.第一步先在data中定义数组data(){return{passSaveShow:[],//通行组保存和取消的显示隐藏p...

JavaScript 2021-05-06 175 0 0 阅读全文

Vue中通过使用$Attrs实现组件之间的数据传递功能

组件之间传递数据的方式有很多种,之所以有这么多种方式,是为了满足在不同场景不同条件下的使用。一般有三种方式:propsvuexVueEventBus本文介绍的是使用$attrs的方式。这是$attrs的官网apihttps://cn.vuejs.org/v2/api/#vm-attrs这个api是在...

JavaScript 2021-04-27 141 0 0 阅读全文

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

操作步骤引入前端代码前端代码是参考github上的一个开源项目,里面包括AI机器人回复和聊天室两个模块,这里只抽取出来一个AI机器人回复的前端,有兴趣的话,可以点击查看封装好代理与请求因为第三方API的请求是外网的,存在跨域问题,所以要配置代理,配置如下:文件:vue.config.jsconstv...

JavaScript 2021-05-28 159 0 0 阅读全文

Vue实现一个简单在线学生录入系统

最近一直在学Vue,这次做了一个简单的在线学生信息录入系统来巩固一下所学知识。因为主要是巩固Vue的知识,所以数据也没放数据库,也没用JavaBean或者Servlet,直接写死到表单里了。具体页面是这样的:先罗列一下其中用到的Vue的知识点:①v-for指令的使用②v-model指令的使用③v-o...

JavaScript 2021-06-28 153 0 0 阅读全文

Vue.Js中Ref及$Refs的使用方法解析

关于ref和$refs的用法及讲解,vue.js中文社区(https://cn.vuejs.org/v2/api/#ref)是这么讲解的:ref被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,引用指向的就是DOM元素;如果用在子组件上,引用...

JavaScript 2021-04-29 179 0 0 阅读全文

在Vue里如何把网页的数据导出到Excel的方法

在Vue里如何把网页的数据导出到Excel?:在做后台管理的时候,我们往往有需要把网页上面的数据导出到excel这样的需求,真实的企业项目里对应一些导出财务报表、员工信息、交易记录、考勤打卡记录…等等需求,本文将对此做探讨。开始前补充:网上是有些牛人已经把这个功能封装成组件了,但每个人的封装逻辑五花...

JavaScript 2021-05-15 137 0 0 阅读全文

Vue路由 遍历生成复数Router-Link的例子

业务场景:使用vue-cli做一个spa;需求:顶部导航栏控制下方内容栏,实现页面内切换。毫无疑问,vue-router很适合这样的需求,实现起来也并不复杂:1、main.js:importVueRouterfrom'vue-router'Vue.use(VueRouter);2、定义(路由)组件:...

JavaScript 2021-05-06 162 0 0 阅读全文

基于Vue实现简易打地鼠游戏

打地鼠简易版*{margin:0;padding:0;}#main{border:1pxsolid#000;}.ds{float:left;border:1pxsolid#000;box-sizing:border-box;}.dd{background-color:#3E8F3E;}倒计时{{t}...

JavaScript 2021-05-20 149 0 0 阅读全文

AntV F2和Vue-Cli构建移动端可视化视图过程详解

AntVF2是蚂蚁金服旗下的一个专注于移动,开箱即用的可视化解决方案,完美支持H5环境同时兼容多种环境(Node,小程序,Weex),完备的图形语法理论,满足你的各种可视化需求,专业的移动设计指引为你带来最佳的移动端图表体验。AntVF2官方文档地址:https://antv.alipay.com/...

JavaScript 2021-04-29 170 0 0 阅读全文

Vue实现移动端H5数字键盘组件使用详解

我们平时扫码付款的时候,经常会输入一些数字进行付款,仔细看了下键盘和系统的键盘有点不一样,于是今天买甘蔗的时候扫码付款就想了一下要怎么去实现一个。话不多说,直接上代码。结果如下:代码如下:123×456789确定0.exportdefault{name:'App',data(){return{act...

JavaScript 2021-05-20 155 0 0 阅读全文

Vue实现Div单选多选功能

vue实现div单选多选功能单选单选:多选:单选功能DOM层:-16岁17-25岁26-35岁36-45岁46-55岁55岁以上js层:newVue({el:'#home',data(){return{ageActive:11//初始选中状态的元素id}},methods:{changeStatus...

JavaScript 2021-05-28 160 0 0 阅读全文

解决在Vue中使用Axios用Form表单出现的问题

vue中使用Axios第三方库,采用形式提交,参数格式为multipart/格式数据,请求参数变为对象格式的解决办法。(推荐第二种方法)提交数据的四种编码方式一,应用/XWWW的窗体-urlencoded这应该是最常见的后编码方式,一般的表单提交默认以此方式提交。大部分服务器语言对这种方式都有很好的...

JavaScript 2021-05-06 172 0 0 阅读全文

Vue下拉列表的两种实现方式比较

第一种采用v-for的方式这种方式需要在data中定义columeTypeArr,如下data(){return{columeTypeArr:[{value:'String',label:'字符串'},{value:'Int',label:'整数',},{value:'Decimal',label:...

JavaScript 2021-06-09 150 0 0 阅读全文

Vue Cli3 配置Proxy代理无效的解决

vuecli3创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法vue.config.js配置如下内容(不要配置任何多余的选项,什么changOriginpathRewrite之类的东西都不要配):module.exports={devServer:{p...

JavaScript 2021-05-06 147 0 0 阅读全文

Uni-App使用Countdown插件实现倒计时

本文实例为大家分享了使用countdown插件实现倒计时的具体代码,供大家参考,具体内容如下实现的效果如下:这里实现的是一个活动倒计时,获取当前时间和活动开始时间,相减得出的时间差就是我们需要的倒计时。使用插件很方便。首先新建一个项目,选择uni-app,模板选择hello-uniapp,里面有官网...

JavaScript 2021-04-13 178 0 0 阅读全文

SpringBoot+Vue 项目部署上线到Linux 服务器的教程详解

给大家分享以下我是如何部署SpringBoot+Vue前后端分离的项目的,我用的Linux发行版是CentOS7.5有了一个Vue电商后台管理项目阶段性总结(推荐),在开发一个相似的后台就会轻松很多。不过前面的系统的后端是使用node完成的,对于我们Java开发者来说,用不到。我学习的是Elemen...

Linux 2021-05-20 167 0 0 阅读全文

解决Vue $Http的Get和Post跨域请求问题

首先在config/index.js中配置proxyTableproxyTable:{'/api':{//target:'http://jsonplaceholder.typicode.com',target:'http://localhost:9080',changeOrigin:true,pat...

JavaScript 2021-06-09 123 0 0 阅读全文

Vue实现自定义多选按钮

图示返回的选中列表是一个数组html部分{{item.val}}js部分//dataarr:[{val:1,ischeck:false},{val:2,ischeck:false},{val:3,ischeck:false},{val:4,ischeck:false},{val:5,ischeck:...

JavaScript 2021-05-28 181 0 0 阅读全文