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

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

3个回答

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

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

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

weixin_43816501
阳光下温暖的问候 回复qq_37814535: 两个都用
大约一个月之前 回复
qq_37814535
qq_37814535 用了它以后pc端又不能点了
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Vue移动端开发问题纪要
Vue移动端开发问题纪要 1、UC浏览器兼容性问题 现象 在部分Android机型中的UC浏览器下访问,出现白屏现象 解决 之前遇到过类似的问题,第一反应应该是babel-polyfill的问题,要么没有引入要么是引入的方式不对。 看了一眼 main.js 中babel-polyfill的引入位置,之前并不是在最顶部的位置引入的,于是调整到最顶部的位置 import 'babel-po...
Vue移动端开发--配置
首页使用vue-cli脚手架安装项目开发包, 以及配置git环境 Vue+vuex+axios+rem(flex) 配置4个环境,调用不同的接口:local(本地开发)、beta(测试)、pre(预上线)、prod(正式上线) 一、修改index.html文件 修改头部meta标签 Plain Text // 使用lib-flexible 可去掉这段代码,会自动添加的 <meta nam...
vue 点击事件
最简单的点击事件 定义变量:mask = true 绑定点击事件:@click="mask = !mask " v-if="mask " 这个加给要显示的 <div @click="mask=!mask">21312321321</div> <div v-if="mask">wahdouihadsjkahnbwahdouihadsjkahn...
Vue点击事件
1.点击事件 <div v-on:click=openTab(item); class="message-item message-unread" v-for="(item) in rutaskLists" > v-on:click=openTab(item); 点击触发事件 @click=”openTab(item)” 简写点击触发事件 ...
vue项目开发中better-scroll在移动端开发案例
本文章仅仅是对日常项目开发移动端常见的2个场景(横屏与竖屏)使用,更多知识点请参考官网文档 一、手机端全屏滚动 1、效果图 2、具体代码自己看了<template> <!--定义外层--> <div class="wrapper" ref="wrapper"> <!--定义需要滚动的内容区域--> <ul class="content">
vue框架移动端开发入门指南
vue框架移动端开发入门指南vue框架移动端开发入门指南
Vue框架移动端开发组件集合
文件上传vue-upload-component Vuejs文件上传组件vue-core-image-upload 轻量级的vue上传插件vue-dropzone 用于文件上传的Vue组件vue-image-crop-upload vue图片剪裁上传组件拖拽Vue.Draggable 实现拖放和视图模型数组同步vue-sortable 轻松添加拖拽排序vue-dragula 使拖放变得简单vue-...
移动端开发ios下body点击事件无法触发的解决方法
今天在移动端开发的过程中,遇到了一个很常见的bug,需求是点击按钮展开菜单内容,再次点击或者点击任意其他内容收进原来样子,在pc,安卓可以正常使用,但是在ios端点击body不生效,在网上也搜集了一些大家的解决方法。 首先看下小例子: 这个例子中在正常的pc和安卓显示中可以实现,但是在ios中显示有问题,因为IOS浏览器的window、document、body并不接受click事件,
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点击事件失效
在做项目时给button添加click事件,发现没反应,但另外写了一个button添加同样的事件,却能触发。 原因是使用了better-scroll,默认它会阻止touch事件。所以在配置中需要加上click: true 例: mounted(){ this.scroll=new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: ...
vue 的 router-link 添加点击事件
根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话,需要加上native修饰符。 所以如果在想要在router-link上添加事件的话需要@click.native这样写 ...
vue 自定义点击事件
我们在项目开发中使用vue的时候发现vue内置的click事件在移动端使用会有300毫秒的点击延迟,所以我们就自己写了一个点击的自定义事件,希望对各位有所帮助,不足之处希望各位能够及时沟通。 废话就不多说了,直接贴代码了: (function(){ var touchSupport = (('ontouchstart' in window) || (naviga
移动端开发
移动前端开发正逐渐步入前端技术的主流,事实上跟在一般的PC上,并不需要你掌握额外的技术,然而你在PC Web上那一套在多数情况下并不适用于手机Web,你必须知道这其中的注意点。But,移动端布局最爽的就是再也不用考虑各种对IE的兼容了! 一 . 首先来说一下移动端和pc端页面布局的不同点 显示设备(屏幕) 操作(鼠标、指尖) 浏览器内核:移动端不用考虑ie,但是各种浏览器内核(手机自带)、微信浏...
Vue 点击事件写法
这里记录v-on:click 的简写 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt; &lt;title&gt;&lt;/title&...
vue模拟点击事件
通过vue的ref this.$refs.refName.click()
vue屏蔽点击事件
思路如果不能点击就 return false 例: submit() { // 点击事件 if (this.condition) { // 屏蔽 return false }else { ...
测试文章
测试文章
vue实现的旅游页面应用移动端开发
vue实现的旅游页面应用-移动端开发
基于vue构建的大型单页面应用移动端开发
基于vue构建的大型单页面应用-移动端开发 包括购物车的项目,项目涉及到对money的逻辑计算。 涉及 ES6 等新属性
求教使用vue进行移动端开发的适配方案!
请细化每个步骤,比如:用什么插件,这个插件是在哪儿下载的,在vue中是怎么引入的,在哪个部位引入,需要进行哪些配置。如果是自己封装的js插件,这个js插件是在哪儿引入,是怎么引入的,开发的时候直接写px单位,最后在开发者模式下看到的是rem单位。
Vue移动端开发如何在手机端时时预览
在开发移动端的时候,特别想在真机上看自己开发出来的成果,之前用的是 Ghostlab这玩意,可是呢,这玩意是要收费的,而且只有7天的体验时间,感觉有点不满足。 现在分享一个更加方便的方法,是在webpack工具构建在的vue项目,实现真机实时预览... 1.电脑和手机连接同一个wifi 用wifi共享大师开个wifi,手机连接,这都是常规操作啦2.查询本地IP地址WIN + R,输入cmd回车,...
vue移动端开发ios下图片不显示总结
不能在style中有如下字样 img { } 如果要对图片的样式进行设置可以指定class,但是宽高必须为100% 如果想指定图片的宽高只能用内联样式
在Vue组件中获取全局的点击事件
使用场景:在Vue组件中点击某元素之外的地方移除该元素需求:如上图所示,“用户列表”页面有三个Vue组件组成,分别是“菜单组件”,“导航组件”和“列表组件”。其中“列表组件”中包含一个“下拉菜单”,当我们点击“下拉菜单”以外的区域隐藏下拉菜单。解决方法一:出现“下拉菜单”的同时,建一个透明的遮罩层,然后只有“下拉菜单”可以点,点击遮罩层就隐藏。缺点:z-index层数要控制好,还有就是如果点击其他...
Vue中设置每隔1秒才能点击事件
 方式1 设置标志位 // 点击站点名 handleclick (name) { let that = this if (this.flag) { //逻辑代码 } this.flag = false this.timerID = setTimeout(function () { console...
vue 中el-card点击事件失效解决
@click="openArticle('123') 替换为 @click.native="openArticle('123')
Vue在列表中绑定点击事件后的处理方法
问题描述:使用Vue框架渲染了一个列表,当列表中存在点击事件时,怎么才能获取到类似于jQuery的$(this)的方式获取元素呢?
Token在移动端开发中的设计
目录 一: Token运用 二: Token实现流程 一: Token运用 1.app登陆成功,生成一个token; (1)token可以是文件的形式存着; (2)也可以存在数据库,但是不建议存放在数据库,因为每次调用api接口都会对比,这样做法会加重服务器压力; (3)用redis存放token,推荐;   2.登录成功之后,服务端返回token,让安卓或者ios去保存这个tok...
vue键盘事件点击事件加native
&amp;lt;el-card class=&quot;box-card animated flipInY&quot;&amp;gt; &amp;lt;el-form :model=&quot;ruleForm2&quot; :label-position=&quot;labelPosition&quot; status-icon :rules=&quot;rules2&quot; ref=&quot;ruleForm2&quot; label-width=&quot;50px&quot; cl
vue router-link点击事件无效解决方法
在router-link上使用@click无效是因为router-link的作用是单纯的路由跳转会影响阻止点击事件,使用@click.native就可以了
swiper在vue里点击事件无效
swiper在vue里点击事件无效 再swiper里触发点击事件onclick
vue router-link添加点击事件无效
本文知识点比较简单,只要面向新人解惑,vue高手请忽略。 在vue实际开发中可能会遇到比较常见的问题之一:router-link添加点击事件无效。 这是为什么呢? 请看下文
vue绑定的点击事件阻止冒泡
当我们在使用vue做项目时,经常用到点击事件的绑定,但是我们绑在一个div上,里面的其他按钮(如删除、修改)等按钮也会加载这儿div的点击事件,而事实我们不需要,如何解决: 首先我们来区分事件冒泡、事件捕获是什么 (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。   IE 6.0: div -> body -> html ->
vue router-link 上添加点击事件
在vue学习中遇到给router-link添加点击事件无效的情况。 例如: 发现事件没有执行,后根据vue的官方文档得知想在某个组件的根元素上监听一个原生事件。可以使用.native修饰v-on 例如: 这样就可以啦! 学习笔记,如有不足请多指教!
vue自定义指令实现自动点击事件
记录生活,留下美好! vue实现自动点击事件,刚进入页面即发生点击事件。 这里用的是vue的自定义指令directive,具体使用可移步到vue文档。 1.若是没有v-for循环,则直接放入directive自定义指令。 &lt;template&gt; &lt;div class="clickdown" @click="myClick()" v-clickDown&gt;自动点击&lt...
高德地图添加点击事件实例(vue)
基本使用方法: 先把map对象new出来,传入参数为html里的div id var map=new AMap.Map('container'); 然后就可以使用map对象了。map,覆盖物等常用的类,官方推荐用on方法绑定,如下代码绑定了一个mouseover事件,鼠标进入时会弹出alert: map.on('mouseover',function () { ...
vue数据操作 num加减点击事件
&amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;button v-on:click=&quot;add(10)&quot;&amp;gt;click me&amp;lt;/button&amp;gt; &amp;lt;button v-on:click=&quot;remove(5)&quot;&amp;gt;click me&amp;lt;/button&amp;gt; &amp;lt;button v-on:click=&quot;n
VUE ROUTER-LINK 上添加点击事件
点击事件失败原因:router-link会阻止click事件,你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况解决方案:根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的click
在移动端开发中,容易遇到的问题集合。
1、禁止IOS,Android长按下载图片.css { -webkit-touch-callout : none; } 2、禁止IOS,Android用户选中文字 .css { -webkit-user-select : none; } 3、① IOS中input [ type =’button’] 显示的不是自己设置的样式,而是IOS默认样式;② 移动端IOS手机下清除输入框内阴影input [
移动端开发-响应式布局
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,当然响应式布局理论上应该是pc端和移动端都是可以的,不过在实际的操作中因为移动端的开发有时候要针对不同的终端,下面我就针对移动端的开发对移动端页面的响应式开发的步骤和原理做下简单的总结。        我们再做移动端开发的时候在布局的选择上,比如弹性布局,百分比布局,流式布局,固定布局等,当然我个人感觉目前比较比较常用的是rem布
移动端开发的一些问题
解惑好文:移动端H5页面高清多屏适配方案 http://mobile.51cto.com/web-484304.htm对比了下文章和公司目前状况,关于图片清晰度这一点,公司没有这方面的要求,我们也没有做这么复杂,所有图片一律用@2x。我确实已经遭遇过好几次还原度不高的问题,一度觉得很费解,我实话我真的看不出来还原度有多么的不高。dpr在移动端开发中应该是需要特别注意的一点,dpr可以理解为css中
相关热词 c++和c#哪个就业率高 c# 批量动态创建控件 c# 模块和程序集的区别 c# gmap 截图 c# 验证码图片生成类 c# 再次尝试 连接失败 c#开发编写规范 c# 压缩图片好麻烦 c#计算数组中的平均值 c#获取路由参数