Vue在移动端开发中的点击事件

在移动端开发的过程中,引用了vue.js,但是只有个v-on:click的点击事件
过期额度>
但是在手机端点击这个button的时候 会有一个灰色的背景色一闪而过
改成span 也没有解决问题 求解答~~~

0

3个回答

用@touchstart代替@click 事件, pc 也能触发,不影响页面调试

0
qq_37814535
qq_37814535 用了它以后pc端又不能点了
一年多之前 回复

我感觉这个应该是这些框架的闪烁问题,vue.js的指令是在dom加载完成再进行解析,会比dom的加载慢,解决办法使用v-bind或v-cloak

0

这个跟框架貌似没有什么关系吧,是css的问题,百度搜css去除点击背景闪烁就有答案了

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue框架移动端开发入门指南
vue框架移动端开发入门指南vue框架移动端开发入门指南
移动端iOS下click点击事件委托失效的解决办法
vue自定义移动端touch事件,点击、滑动、长按事件
vue自定义移动端touch事件,点击、滑动、长按事件.将以上代码保存到一个js文件内,引入到页面vue库文件之后、用户js文件之前。这样就可以使用vue的触屏事件了。
vue 开发移动端
使用vue心得,聊聊vue
Vue移动端开发--配置
首页使用vue-cli脚手架安装项目开发包, 以及配置git环境 Vue+vuex+axios+rem(flex) 配置4个环境,调用不同的接口:local(本地开发)、beta(测试)、pre(预上线)、prod(正式上线) 一、修改index.html文件 修改头部meta标签 Plain Text // 使用lib-flexible 可去掉这段代码,会自动添加的 <meta nam...
学习使用Vue2.0于移动端开发
偶然在GitHub论坛看到一个“基于Vue2.0高仿微信App”,点入一看,效果果真非常逼真。于是,立马入手学习。也记录对一些地方的理解: 1.过滤器 该项目中用到了时间过滤器,能将时间戳以固定的格式打印输出。过滤器官方文档在此,正如文档中所给出定义过滤器的两种方法,分为全局和局部,用在两个地方双括号插值和v-bind表达式,且过滤器应该添置在js表达式的尾部,由“管道”即“|”指示。该项目中
基于Vue2的移动端开发环境搭建详解
前言vue2.0发布了,那么还在用vue1.x的你,是不是也有所心动呢?下面这篇文章就给大家详细介绍基于Vue2的移动端开发环境搭建的详细步骤,下面来一起看看吧。一、vue-cli首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利运行的前提是安装最新版本的 node 和 npm,这里不赘述升级流程全局安装 vue-cli?1npminstallv...
Vue 移动端项目 百度地图 点击事件无效、不触发 解决方案
解决百度地图 手机端 点击事件不触发 的一种方案 版权声明:本文为博主原创文章,转载请标明原文出处。  个人技能手册:https://github.com/DevilMafia/personal-skill-tree 问题背景 我是半路接手的这个项目,该项目使用 Vue 开发的一款 手机端的页面。到手里时,使用百度地图的部分已经完成,之前的兄弟在开发是一只都是在 PC 端用浏览器的手机...
关于移动端开发中遇到的坑-vue
滚动穿透问题滚动穿透是指在移动端当有 fixed 遮罩背景和弹出层时,在屏幕上滑动能够滑动背景下面的内容。网上整理了解决方案,但有些还是存在一定的问题:https://gitlwz.github.io/2018/05/02/vue-move/设置overflow为hidden1 2 3 4 5 6 .modal-open { &, body { overflow: ...
vue项目笔记(5)-移动端项目中click事件300ms延迟的解决方法
vue移动端项目中click事件300ms延迟的解决方法 移动端项目中,在某些机型某些浏览器下,依然存在click事件300ms延迟的问题,影响用户满意度。vue项目中,可以通过引入fastclick第三方依赖包来解决。具体步骤如下: 1、安装fastclick依赖,方法如下: npm install fastclick ---save 2、在入口文件main.js中引入并使用,方法如下...
vue2.0做移动端开发用到的相关插件和经验总结(2)
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少。经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api(微信分享,微信支付),百度地图api(如何实例化地图,给地图添加自定义覆盖物,给地图添加自定义标注,对地图进行缩放,拖拽等)的相关使用,开阔了自己的知识眼界;现将我开发过程中积累的相关经验与大家进行分...
关于移动端开发中遇到的坑
原文:http://jungahuang.com/2017/07/30/something-about-web-app/三月中旬跳完槽之后就好好久没写博客了,跳到某公司之后,怀揣着满腔热水的我又投入了工作中,从面试、办理离职到入职只用了一个星期。这效率也没谁了,入职之后给了一个小项目,用Vue全家桶开发一个简易的个人博客。因为之前自学了解过,于是很快就上手,原本要求用两周的时间用了三天就完成了全部
Vue开发移动端踩过的坑——笔记
移动端滑动导航条插件 ——ly-tab 在移动端开发中,一开始是使用的mint-ui里原生的navbar选择项卡,后来因为需求需要做成可滑动的tab选项卡,所以百度搜索到这么这么插件。 该插件的github地址:ly-tab...
移动端填坑:ios系统点击事件失效的解决办法
问题描述:在开发移动端页面的时候,经常会给元素添加点击事件,但在ios系统上会失效,以下是解决办法: 解决办法:给被点击元素添加 cursor:pointer; 样式即可,具体原理还未查到~
vue 自定义点击事件
我们在项目开发中使用vue的时候发现vue内置的click事件在移动端使用会有300毫秒的点击延迟,所以我们就自己写了一个点击的自定义事件,希望对各位有所帮助,不足之处希望各位能够及时沟通。 废话就不多说了,直接贴代码了: (function(){ var touchSupport = (('ontouchstart' in window) || (naviga
vue 项目引入 echarts 添加点击事件
main.js中 import echarts from 'echarts' Vue.prototype.$echarts = echarts vue文件中 _this.calendarChart=_this.$echarts.init(document.getElementById('earlyWarningCalendar')) _this.calendarChart.on...
Vue移动端开发如何在手机端时时预览
在开发移动端的时候,特别想在真机上看自己开发出来的成果,之前用的是 Ghostlab这玩意,可是呢,这玩意是要收费的,而且只有7天的体验时间,感觉有点不满足。 现在分享一个更加方便的方法,是在webpack工具构建在的vue项目,实现真机实时预览... 1.电脑和手机连接同一个wifi 用wifi共享大师开个wifi,手机连接,这都是常规操作啦2.查询本地IP地址WIN + R,输入cmd回车,...
vue获取当前点击事件
vue click事件获取当前元素对象 点击当前行获取下一行 li2 li3 new Vue({ el: '#app',
Vue点击事件失效
在做项目时给button添加click事件,发现没反应,但另外写了一个button添加同样的事件,却能触发。 原因是使用了better-scroll,默认它会阻止touch事件。所以在配置中需要加上click: true 例: mounted(){ this.scroll=new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: ...
vue.js实现点击事件
--> 当前 北京 历史选择 {{ history }} 热门城市 {{ city.text }} css代码 #container{ width:300px; height:180px; } /
swiper在vue里点击事件无效
swiper在vue里点击事件无效 再swiper里触发点击事件onclick
Vue在列表中绑定点击事件后的处理方法
问题描述:使用Vue框架渲染了一个列表,当列表中存在点击事件时,怎么才能获取到类似于jQuery的$(this)的方式获取元素呢?
Vue-2-循环和点击事件(留言板事例)
用到Bootstrap,和Vue的点击事件,循环,和数据取值 Bootstrap需要jQuery.js<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>留言板</title> <script src="
vue.js使用vue-echarts给柱形图绑定点击事件
&amp;lt;template&amp;gt; &amp;lt;div class=&quot;echarts&quot;&amp;gt; &amp;lt;IEcharts :option=&quot;bar&quot; :loading=&quot;loading&quot; @ready=&quot;onReady&quot; @click=&quot;onClick&quot;&amp;gt;&amp;lt;/IEcharts&amp;gt; &amp;lt;button @cl
VUE v-html不能触发点击事件的解决方案
背景:后端返前端html格式的数据,前端用v-html解析渲染,如:&amp;lt;a @click=&quot;show(1)&quot;&amp;gt;&amp;lt;/a&amp;gt;,a标签能成功渲染,但其绑定的事件无法触发。 原因:vue没有将其作为vue的模板解析渲染 解决方案:不用v-html而是component模板编译 上干货: &amp;lt;template&amp;gt; &amp;lt;div class=&quot;hello&quot;&amp;gt;...
移动端开发遇到的兼容性问题
H5页面窗口自动调整到设备宽度,并禁止用户缩放页面&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&quot; /&amp;gt;(部分安卓手机的UC浏览器写完以后还是可以放大缩小)忽略将页面中的数字识别为电话号码&amp;lt...
swiper在vue里v-for循环后添加点击事件
swiper官方文档里有 点击事件的文档 在html上为轮播添加一个自定义事件 在js里获取到自定义事件传的值 然后跳转
vue.js怎样移除绑定的点击事件?
使用v-on:click绑定的事件如何移除??? 现在我的处理方式是: "flag && clickEvent()">p> 加上一个标志位来控制点击事件是否能触发. 也可以这样解决: 采用v-if解决: 点击 点击 然后在data里添加unbind=false属性,需要解绑的时候将其设置为true
vue事件中点击对象(this)
vue事件中点击对象(this),currentTarget 和 target的区别 区别如下 target指向,事件最终所作用于的对象 currentTarget指向,事件定义时所在的对象 例子如下 &amp;lt;template&amp;gt; &amp;lt;div id=&quot;this_api&quot;&amp;gt; &amp;lt;p class=&quot;welcome&quot; @click=&quot;tap&quot;&amp;g..
vue绑定点击事件
document --> window.onload = function(){ var c = new Vue({ el:".box", data:{ a:true, arr:["a","b","c"] }, methods:{ add: function(){ this.arr.push("d"); },
在Vue组件中获取全局的点击事件
使用场景:在Vue组件中点击某元素之外的地方移除该元素需求:如上图所示,“用户列表”页面有三个Vue组件组成,分别是“菜单组件”,“导航组件”和“列表组件”。其中“列表组件”中包含一个“下拉菜单”,当我们点击“下拉菜单”以外的区域隐藏下拉菜单。解决方法一:出现“下拉菜单”的同时,建一个透明的遮罩层,然后只有“下拉菜单”可以点,点击遮罩层就隐藏。缺点:z-index层数要控制好,还有就是如果点击其他...
vue 绑定对象内点击事件失效问题
突然的发现某段 html 代码中点击事件失效了。仔细观察才发现,这段代码内的元素都在 vue 绑定对象中。因此失效。解决办法是将绑定对象内的元素点击事件换成 v-on:click。...
vue5点击事件
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;Vue Demo&amp;lt;/title&amp;gt; &amp;lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;l
vue中让一个div的点击事件关联到其他的相同div的方法
事实上采用的方法是利用每个元素的内部属性的特性: 在以下的代码里面我用item.taskid绑定了一个自定义属性taskIdGo,于是每次通过判断这个div的taskIdGo的值是否相同来确定当前的div是否是自己所要操作的div。 &amp;lt;a href=&quot;javascript:void(0)&quot;&amp;gt;&amp;lt;i class=&quot;fa fa-bug fa-2&quot; v-show=&quot;item.has...
如何对vue中的组件进行点击事件监听
&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/element-ui/lib/theme-default/index.css&quot;&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;component :is=&quot;name&quot;
Vue2 移动端开发记录
转载 1、position:absolute: 定位的时候不同手机的浏览器版本不一样,存在兼容性问题,所以要修改为fixed,然后使用left: calc(50% - 1rem )进行定位; 2、event.touches[0].pageY:移动端事件touchstart,touchmove,touchend,在vue中的手指滑动的对象是要传入$event才可以使用event.touc
vue项目中使用better-scroll @click事件在移动端失效
原因是你使用了better-scroll,默认它会阻止touch事件。所以在配置中需要加上如下属性就可以了 mounted(){ this.scroll=new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true }) } ...
vue脚手架vue-cli 中 引入 jquery 把某个按钮 加上点击事件 事件 第一次 成功 第二次就失效了
这里 其实 涉及到了  vue生命周期     当我们 引入jq   是不是 每次都要写$(function(){})或者是document.ready 等 代码 其实 这里可以看出 jq 生效也是有生命 周期得       所以  我们让jq 生效  必须在生命周期内     我们在这里 可以利用 vue生命周期   把jQuery中的代码放到mounted中  此时  就可以 生效了看下图...
vue中绑定点击事件@click的用法以及详解
-
vue 组件的传值(点击事件得到的值)
父组件得到其他A组件的数据,要传到B组件。在父组件把数据绑定在B组件的标签上。例如:&amp;lt;MainPageMap&amp;gt;&amp;lt;/MainPageMap&amp;gt;是父组件。&amp;lt;tree&amp;gt;&amp;lt;/tree&amp;gt;和&amp;lt;contrast&amp;gt;&amp;lt;/contrast&amp;gt;是子组件 :zbId=&quot;zbId&quot; :zbText=&quot;zbText&quot;就是要传到&amp
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 移动端开发培训 移动端开发培训