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

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

0

3个回答

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

0

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

0

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

0
qq_37814535
qq_37814535 用了它以后pc端又不能点了
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue框架移动端开发入门指南
vue框架移动端开发入门指南vue框架移动端开发入门指南
移动端iOS下click点击事件委托失效的解决办法
关于移动端开发中遇到的坑-vue
滚动穿透问题滚动穿透是指在移动端当有 fixed 遮罩背景和弹出层时,在屏幕上滑动能够滑动背景下面的内容。网上整理了解决方案,但有些还是存在一定的问题:https://gitlwz.github.io/2018/05/02/vue-move/设置overflow为hidden1 2 3 4 5 6 .modal-open { &, body { overflow: ...
vue移动端长按事件
代码 var timeOutEvent=0;//定时器 // html <div @touchstart="gotouchstart" @touchmove="gotouchmove" @touchend="gotouchend"></div> //js gotouchstart(){ let that = thi...
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做移动端开发用到的相关插件和经验总结(2)
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少。经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api(微信分享,微信支付),百度地图api(如何实例化地图,给地图添加自定义覆盖物,给地图添加自定义标注,对地图进行缩放,拖拽等)的相关使用,开阔了自己的知识眼界;现将我开发过程中积累的相关经验与大家进行分...
学习使用Vue2.0于移动端开发
偶然在GitHub论坛看到一个“基于Vue2.0高仿微信App”,点入一看,效果果真非常逼真。于是,立马入手学习。也记录对一些地方的理解: 1.过滤器 该项目中用到了时间过滤器,能将时间戳以固定的格式打印输出。过滤器官方文档在此,正如文档中所给出定义过滤器的两种方法,分为全局和局部,用在两个地方双括号插值和v-bind表达式,且过滤器应该添置在js表达式的尾部,由“管道”即“|”指示。该项目中
移动端web开发初探之Vuejs的简单实战
这段时间在做的东西,是北邮人论坛APP的注册页。这个注册页是内嵌的网页,因为打算安卓和IOS平台同时使用。因此实际上就是在做移动端的web开发了。 在这过程中遇到了不少有意思的东西。DEMO的github地址在这里内容提要:meta标签Vuejs的简单实战CSS移动端全屏背景CSS移动端动画初探meta标签 这点与在PC端写前端有着很大的区别,移动端的meta标签简直多。我就说说我所用到的标签。<
基于Vue2的移动端开发环境搭建详解
前言vue2.0发布了,那么还在用vue1.x的你,是不是也有所心动呢?下面这篇文章就给大家详细介绍基于Vue2的移动端开发环境搭建的详细步骤,下面来一起看看吧。一、vue-cli首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利运行的前提是安装最新版本的 node 和 npm,这里不赘述升级流程全局安装 vue-cli?1npminstallv...
vue移动端绑定click事件失效问题
原因可能是你使用了better-scroll,默认它会阻止touch事件。所以在配置中需要加上click: true 例: mounted(){ this.scroll=new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true }) }...
移动端开发遇到的兼容性问题
H5页面窗口自动调整到设备宽度,并禁止用户缩放页面<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />(部分安卓手机的UC浏览器写完以后还是可以放大缩小)忽略将页面中的数字识别为电话号码&lt...
Vue开发移动端踩过的坑——笔记
移动端滑动导航条插件 ——ly-tab 在移动端开发中,一开始是使用的mint-ui里原生的navbar选择项卡,后来因为需求需要做成可滑动的tab选项卡,所以百度搜索到这么这么插件。 该插件的github地址:ly-tab...
vue获取当前点击事件
vue click事件获取当前元素对象 点击当前行获取下一行 li2 li3 new Vue({ el: '#app',
vue 自定义点击事件
我们在项目开发中使用vue的时候发现vue内置的click事件在移动端使用会有300毫秒的点击延迟,所以我们就自己写了一个点击的自定义事件,希望对各位有所帮助,不足之处希望各位能够及时沟通。 废话就不多说了,直接贴代码了: (function(){ var touchSupport = (('ontouchstart' in window) || (naviga
在Vue组件中获取全局的点击事件
使用场景:在Vue组件中点击某元素之外的地方移除该元素需求:如上图所示,“用户列表”页面有三个Vue组件组成,分别是“菜单组件”,“导航组件”和“列表组件”。其中“列表组件”中包含一个“下拉菜单”,当我们点击“下拉菜单”以外的区域隐藏下拉菜单。解决方法一:出现“下拉菜单”的同时,建一个透明的遮罩层,然后只有“下拉菜单”可以点,点击遮罩层就隐藏。缺点:z-index层数要控制好,还有就是如果点击其他...
swiper在vue里v-for循环后添加点击事件
swiper官方文档里有 点击事件的文档 在html上为轮播添加一个自定义事件 在js里获取到自定义事件传的值 然后跳转
vue.js怎样移除绑定的点击事件?
使用v-on:click绑定的事件如何移除??? 现在我的处理方式是: "flag && clickEvent()">p> 加上一个标志位来控制点击事件是否能触发. 也可以这样解决: 采用v-if解决: 点击 点击 然后在data里添加unbind=false属性,需要解绑的时候将其设置为true
Vue在列表中绑定点击事件后的处理方法
问题描述:使用Vue框架渲染了一个列表,当列表中存在点击事件时,怎么才能获取到类似于jQuery的$(this)的方式获取元素呢?
Vue点击事件失效
在做项目时给button添加click事件,发现没反应,但另外写了一个button添加同样的事件,却能触发。 原因是使用了better-scroll,默认它会阻止touch事件。所以在配置中需要加上click: true 例: mounted(){ this.scroll=new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: ...
vue.js使用vue-echarts给柱形图绑定点击事件
<template> <div class="echarts"> <IEcharts :option="bar" :loading="loading" @ready="onReady" @click="onClick"></IEcharts> <button @cl
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="
swiper在vue里点击事件无效
swiper在vue里点击事件无效 再swiper里触发点击事件onclick
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.js实现点击事件
--> 当前 北京 历史选择 {{ history }} 热门城市 {{ city.text }} css代码 #container{ width:300px; height:180px; } /
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中的组件进行点击事件监听
&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;
vue中绑定点击事件@click的用法以及详解
-
vue模拟点击事件
通过vue的ref this.$refs.refName.click()
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)
基本使用方法: 先把map对象new出来,传入参数为html里的div id var map=new AMap.Map('container'); 然后就可以使用map对象了。map,覆盖物等常用的类,官方推荐用on方法绑定,如下代码绑定了一个mouseover事件,鼠标进入时会弹出alert: map.on('mouseover',function () { ...
VUE 点击事件(父子层级元素点击时踩坑记录)
https://www.cnblogs.com/liangjing-yy/p/9013061.html
vue脚手架vue-cli 中 引入 jquery 把某个按钮 加上点击事件 事件 第一次 成功 第二次就失效了
这里 其实 涉及到了  vue生命周期     当我们 引入jq   是不是 每次都要写$(function(){})或者是document.ready 等 代码 其实 这里可以看出 jq 生效也是有生命 周期得       所以  我们让jq 生效  必须在生命周期内     我们在这里 可以利用 vue生命周期   把jQuery中的代码放到mounted中  此时  就可以 生效了看下图...
vue click.stop阻止点击事件继续传播
<div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app",
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
vue.js之编程式路由-给router-link的点击事件
今天学习编程式路由,在给router-link添加点击事件之后,发现它无法渲染出来,百度之后,发现要加上一个native。于是改成这样,代码如图: &amp;lt;router-link @click.native=&quot;gotoing()&quot; &amp;gt; 这是编程路由学习哦 &amp;lt;/router-link&amp;gt; methods:{ gotoi...
vue router-link 上添加点击事件
在vue学习中遇到给router-link添加点击事件无效的情况。 例如: 发现事件没有执行,后根据vue的官方文档得知想在某个组件的根元素上监听一个原生事件。可以使用.native修饰v-on 例如: 这样就可以啦! 学习笔记,如有不足请多指教!
vue.js @click绑定点击事件不生效?
这个是在组件开发中遇到的问题,当时我在编写button的组件,模板是这样的: &amp;lt;template&amp;gt; &amp;lt;button class=&quot;disable-hover button ion-button&quot; :class=&quot;[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongCl...
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获取点击事件源办法之一
&amp;lt;button id=1 v-on:click=&quot;nav_click1($event)&quot;&amp;gt;全部&amp;lt;/button&amp;gt;nav_click1:function(event) { console.log(event.target.id); }
文章热词 设计制作学习 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 移动端开发培训 移动端开发培训